/* ============================================================
   WALDAMERI ADVOGADOS
   Sistema visual — Grafite · Cobre · Luz
   Escuro por padrão. Tipografia em escala editorial.
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS — tema claro (padrão do documento)
   ------------------------------------------------------------ */
:root {
  --bg:      #FFFFFF;
  --bg-2:    #F7F6F3;
  --bg-3:    #EFEDE8;
  --fg:      #14171A;
  --fg-2:    #4E5459;
  --fg-3:    #686E73;
  --rule:    #E5E2DC;
  --rule-2:  #CDC9C1;
  --accent:  #9A5B33;
  --accent-2:#B06B3C;
  --on-accent: #FFFFFF;

  /* Grafites absolutos (não mudam com o tema) */
  --void:    #0A0C0D;
  --graphite:#121517;
  --graphite-2: #1A1E21;
  --graphite-3: #23282C;
  --copper:  #D08A54;
  --copper-2:#C2793F;

  /* Tipografia */
  --display: "Source Serif 4", "Literata", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida */
  --t-micro: 0.6875rem;
  --t-xs:    0.8125rem;
  --t-sm:    0.9375rem;
  --t-base:  1.0625rem;
  --t-lg:    clamp(1.15rem, 0.4vw + 1.05rem, 1.35rem);
  --t-xl:    clamp(1.5rem, 1vw + 1.2rem, 2rem);
  --t-2xl:   clamp(2rem, 2.2vw + 1.4rem, 3.25rem);
  --t-3xl:   clamp(2.6rem, 4.4vw + 1.2rem, 5.5rem);
  --t-4xl:   clamp(3rem, 7vw + 0.6rem, 8.25rem);

  --shell: 1400px;
  --gut: clamp(20px, 4vw, 72px);
  --read: 68ch;

  /* Movimento */
  --e:      cubic-bezier(0.22, 1, 0.36, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --e-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 200ms;
  --d:      460ms;
  --d-slow: 900ms;
}

/* ------------------------------------------------------------
   TOKENS — superfícies escuras (escopo automático)
   Qualquer descendente herda o tema. Zero markup extra.
   ------------------------------------------------------------ */
.t-dark,
.hero,
.page-hero,
.cta-band,
.site-footer,
.stat-band,
.index-section {
  --bg:      var(--void);
  --bg-2:    var(--graphite);
  --bg-3:    var(--graphite-2);
  --fg:      #F2F1EE;
  --fg-2:    rgba(242,241,238,0.64);
  --fg-3:    rgba(242,241,238,0.56);
  --rule:    rgba(255,255,255,0.09);
  --rule-2:  rgba(255,255,255,0.18);
  --accent:  var(--copper);
  --accent-2:#E0A272;
  --on-accent: #0A0C0D;
  background: var(--bg);
  color: var(--fg);
}

.t-soft { background: var(--bg-2); }

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv05";
}

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

::selection { background: var(--copper); color: #0A0C0D; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

/* Grão — material, não ruído. Fixo, imperceptível, essencial. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 400;
  pointer-events: none;
  opacity: 0.032;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   TIPOGRAFIA
   ------------------------------------------------------------ */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.02em; }
h4 { font-size: var(--t-lg); line-height: 1.15; letter-spacing: -0.015em; }

.display--xl { font-size: var(--t-4xl); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 54ch;
  letter-spacing: -0.005em;
}

/* Rótulo mono — a assinatura de precisão do sistema */
.label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.label--bare::before { display: none; }
.label--accent { color: var(--accent); }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.muted { color: var(--fg-2); }
.dim   { color: var(--fg-3); }

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gut);
  width: 100%;
}
.shell--read { max-width: 880px; }

.band { padding-block: clamp(72px, 9vw, 160px); }
.band--tight { padding-block: clamp(52px, 6vw, 96px); }

.rule { height: 1px; background: var(--rule); border: 0; }

/* Linhas verticais estruturais — o "papel milimetrado" do escritório */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.gridlines span { border-left: 1px solid var(--rule); }
.gridlines span:first-child { border-left: 0; }

/* ------------------------------------------------------------
   MARCA
   ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--fg);
}
.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.28rem;
  line-height: 1;
  color: var(--accent);
  position: relative;
  overflow: hidden;
  transition: color var(--d) var(--e), border-color var(--d) var(--e);
}
.brand__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 520ms var(--e);
}
.brand__mark span { position: relative; z-index: 1; transition: color var(--d) var(--e); }
.brand:hover .brand__mark::before { transform: translateY(0); }
.brand:hover .brand__mark span { color: var(--on-accent); }

.brand__type { display: flex; flex-direction: column; gap: 3px; }
.brand__name {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

/* ------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background var(--d) var(--e-soft),
              border-color var(--d) var(--e-soft),
              transform 520ms var(--e);
  border-bottom: 1px solid transparent;
  --bg: transparent;
  --fg: #F2F1EE;
  --fg-2: rgba(242,241,238,0.64);
  --fg-3: rgba(242,241,238,0.42);
  --rule: rgba(255,255,255,0.10);
  --accent: var(--copper);
  color: var(--fg);
}
.masthead.solid {
  background: rgba(10,12,13,0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255,255,255,0.09);
}
.masthead.hidden { transform: translateY(-100%); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 88px;
  transition: height var(--d) var(--e);
}
.masthead.solid .masthead__inner { height: 72px; }

/* Navegação */
.nav { display: flex; align-items: center; gap: 34px; }
.nav__link {
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--fg-2);
  position: relative;
  padding-block: 4px;
  transition: color var(--d-fast) var(--e-soft);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 420ms var(--e);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

.nav__group { position: relative; }
.nav__caret {
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 7px;
  opacity: 0.55;
  transition: transform var(--d) var(--e);
}
.nav__group:hover .nav__caret { transform: rotate(225deg) translateY(-3px); }

/* Mega-dropdown */
.mega {
  position: absolute;
  top: calc(100% + 22px);
  left: -28px;
  width: 420px;
  background: var(--graphite);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--d) var(--e), transform var(--d) var(--e), visibility var(--d);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9);
}
.nav__group:hover .mega,
.nav__group:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega::before {
  content: "";
  position: absolute;
  top: -24px; left: 0; right: 0; height: 24px;
}
.mega__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: 4px;
  padding: 14px 16px;
  position: relative;
  transition: background var(--d-fast) var(--e-soft);
}
.mega__item:hover { background: rgba(255,255,255,0.045); }
.mega__item .num { font-size: 0.625rem; color: var(--copper); letter-spacing: 0.12em; }
.mega__ttl { font-size: 0.9375rem; color: #F2F1EE; transition: transform var(--d) var(--e); display: block; }
.mega__item:hover .mega__ttl { transform: translateX(4px); }
.mega__sub {
  grid-column: 2;
  font-size: 0.75rem;
  color: rgba(242,241,238,0.44);
  margin-top: 3px;
  line-height: 1.5;
}
.mega__foot {
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 8px;
  padding: 14px 16px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(242,241,238,0.6);
}
.mega__foot:hover { color: var(--copper); }

/* ------------------------------------------------------------
   BOTÕES
   ------------------------------------------------------------ */
.btn {
  --btn-fg: var(--fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: 0.005em;
  color: var(--btn-fg);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--d) var(--e-soft), border-color var(--d) var(--e-soft);
}
.btn__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 560ms var(--e);
}
.btn:hover .btn__fill { transform: translateY(0); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform 460ms var(--e); display: inline-block; }
.btn:hover .arrow { transform: translateX(5px); }

/* Sólido em cobre */
.btn--solid {
  background: var(--accent);
  --btn-fg: var(--on-accent);
  border-color: var(--accent);
}
.btn--solid .btn__fill { background: var(--fg); }
.btn--solid:hover { --btn-fg: var(--bg); border-color: var(--fg); }

/* Contorno */
.btn--line { border-color: var(--rule-2); }
.btn--line .btn__fill { background: var(--accent); }
.btn--line:hover { --btn-fg: var(--on-accent); border-color: var(--accent); }

.btn--sm { padding: 12px 22px; font-size: 0.8125rem; }

/* Link com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--accent);
  padding-bottom: 3px;
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 420ms var(--e);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left center; }
.link-arrow .arrow { transition: transform 420ms var(--e); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 160px;
  padding-bottom: 44px;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  top: -25%; right: -15%;
  width: 78vw; height: 110%;
  background: radial-gradient(ellipse at 60% 40%, rgba(208,138,84,0.20), rgba(208,138,84,0.05) 38%, transparent 66%);
  pointer-events: none;
  will-change: transform;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero h1 { max-width: 15ch; margin-block: 28px 32px; }
.hero .lead { max-width: 48ch; }

.hero__foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(48px, 8vh, 96px);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.hero__where { display: flex; gap: 40px; flex-wrap: wrap; }
.hero__where div { display: flex; flex-direction: column; gap: 6px; }
.hero__where .v { font-size: 0.9375rem; color: var(--fg); }

.hero__cue {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero__cue i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--accent), transparent);
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue i { animation: cue 2.4s var(--e-soft) infinite; transform-origin: top; }
}
@keyframes cue {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.45); opacity: 0.45; }
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

/* ------------------------------------------------------------
   PAGE HERO (páginas internas)
   ------------------------------------------------------------ */
.page-hero {
  position: relative;
  padding-top: clamp(140px, 16vh, 200px);
  padding-bottom: clamp(56px, 7vw, 104px);
  overflow: hidden;
}
.page-hero__glow {
  position: absolute;
  top: -60%; right: -10%;
  width: 60vw; height: 180%;
  background: radial-gradient(ellipse at center, rgba(208,138,84,0.16), transparent 62%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { max-width: 18ch; margin-block: 24px 26px; }

/* Breadcrumbs */
.crumbs {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.crumbs a { transition: color var(--d-fast) var(--e-soft); }
.crumbs a:hover { color: var(--accent); }
.crumbs i { width: 12px; height: 1px; background: var(--rule-2); display: block; }

/* ------------------------------------------------------------
   MARQUEE
   ------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: 20px;
  display: flex;
  user-select: none;
}
.marquee__track {
  display: flex;
  flex: none;
  gap: 0;
  min-width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: slide 46s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes slide { to { transform: translateX(-100%); } }
.marquee__item {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-inline: 30px;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}

/* ------------------------------------------------------------
   LISTA INDEXADA — áreas de atuação
   ------------------------------------------------------------ */
.index-section { position: relative; }

.index-list { border-top: 1px solid var(--rule); }

.idx {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1.05fr) minmax(0, 1.15fr) 52px;
  align-items: center;
  gap: 24px;
  padding: clamp(26px, 3vw, 42px) clamp(14px, 2vw, 30px);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  transition: padding-inline var(--d) var(--e);
}
.idx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(208,138,84,0.11), transparent 68%),
    var(--bg-3);
  opacity: 0;
  transition: opacity var(--d) var(--e-soft);
}
.idx:hover::before { opacity: 1; }
.idx:hover { padding-inline: clamp(22px, 2.6vw, 42px) clamp(14px, 2vw, 30px); }

.idx__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  transition: color var(--d) var(--e-soft);
}
.idx:hover .idx__n { color: var(--accent); }

.idx__t {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.35rem);
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 1.02;
  transition: transform var(--d) var(--e);
}
.idx:hover .idx__t { transform: translateX(8px); }

.idx__d {
  font-size: 0.9375rem;
  color: var(--fg-2);
  line-height: 1.5;
}
.idx__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.idx__tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--rule);
  padding: 5px 10px;
  transition: border-color var(--d) var(--e-soft), color var(--d) var(--e-soft);
}
.idx:hover .idx__tag { border-color: var(--rule-2); color: var(--fg-2); }

.idx__go {
  justify-self: end;
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--fg-3);
  transition: all var(--d) var(--e);
}
.idx:hover .idx__go {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   BANDA DE NÚMEROS
   ------------------------------------------------------------ */
.stat-band { padding-block: clamp(56px, 7vw, 96px); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.stat {
  background: var(--bg);
  padding: clamp(28px, 3.4vw, 46px) clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat__v {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-optical-sizing: auto;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   SEÇÃO EDITORIAL / MÉTODO
   ------------------------------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.duo--even { grid-template-columns: 1fr 1fr; }
.sticky { position: sticky; top: 130px; }

.head { max-width: 34ch; }
.head h2 { margin-top: 22px; }
.head .lead { margin-top: 22px; }

.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  position: relative;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 1px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1000ms var(--e);
}
.reveal.visible .step::after,
.step.visible::after { transform: scaleX(1); }
.step__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 6px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--fg-2); font-size: var(--t-sm); max-width: 56ch; }

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */
.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--bg);
  padding: clamp(30px, 3vw, 46px) clamp(24px, 2.4vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  isolation: isolate;
  transition: background var(--d) var(--e-soft);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-2);
  opacity: 0;
  transition: opacity var(--d) var(--e-soft);
}
.card:hover::before { opacity: 1; }
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--e);
}
.card:hover::after { transform: scaleX(1); }
.card .num { font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--fg-3); text-transform: uppercase; }
.card h3 { font-size: var(--t-lg); }
.card p { font-size: var(--t-sm); color: var(--fg-2); }
.card .link-arrow { margin-top: auto; padding-top: 10px; }

/* Card escuro (destaques sobre grafite) */
.tile {
  display: block;
  background: var(--bg-2);
  padding: clamp(30px, 3vw, 46px);
  position: relative;
  overflow: hidden;
  transition: background var(--d) var(--e-soft);
}
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 520ms var(--e);
}
.tile:hover { background: var(--bg-3); }
.tile:hover::before { transform: scaleY(1); }
.tile h3 { transition: transform var(--d) var(--e), color var(--d) var(--e-soft); margin-bottom: 10px; }
.tile:hover h3 { transform: translateX(7px); color: var(--accent); }
.tile p { color: var(--fg-2); font-size: var(--t-sm); }

/* ------------------------------------------------------------
   FAIXA DE CTA
   ------------------------------------------------------------ */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 140px);
}
.cta-band__glow {
  position: absolute;
  bottom: -60%; left: 50%;
  transform: translateX(-50%);
  width: 90vw; height: 160%;
  background: radial-gradient(ellipse at center, rgba(208,138,84,0.17), transparent 60%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { max-width: 20ch; margin: 26px auto 22px; }
.cta-band .lead { margin: 0 auto 40px; text-align: center; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* CTA em linha (dentro de conteúdo) */
.cta-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: clamp(26px, 3vw, 40px);
  margin-block: clamp(40px, 5vw, 64px);
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
  transition: background var(--d) var(--e-soft);
}
.cta-inline:hover { background: var(--bg-3); }
.cta-inline p {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 30ch;
  color: var(--fg);
}

/* ------------------------------------------------------------
   RESPOSTA DIRETA — bloco de citação para buscadores e IAs
   ------------------------------------------------------------ */
.answer {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  padding: clamp(26px, 3vw, 40px);
  max-width: 74ch;
}
.answer__q {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}
.answer p {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.answer p + p { margin-top: 14px; font-size: var(--t-base); color: var(--fg-2); }

/* ------------------------------------------------------------
   GLOSSÁRIO
   ------------------------------------------------------------ */
.glossary { border-top: 1px solid var(--rule); }
.term {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  padding-block: clamp(26px, 3vw, 38px);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background var(--d) var(--e-soft);
}
.term:hover { background: var(--bg-2); }
.term dt {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.term dd { color: var(--fg-2); font-size: var(--t-sm); }
.term dd a { color: var(--accent); }
.term__tag {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 8px;
}

/* Índice alfabético fixo */
.alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.alpha a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  padding: 8px 13px;
  border: 1px solid var(--rule);
  color: var(--fg-2);
  transition: all var(--d) var(--e-soft);
}
.alpha a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------
   PROSA
   ------------------------------------------------------------ */
.prose { max-width: var(--read); }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: clamp(48px, 5vw, 76px); margin-bottom: 4px; }
.prose h3 { margin-top: clamp(32px, 3.4vw, 48px); margin-bottom: 2px; }
.prose p { color: var(--fg-2); }
.prose strong { color: var(--fg); font-weight: 550; }
.prose a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--d-fast) var(--e-soft); }
.prose a:hover { border-bottom-color: currentColor; }
.prose ul { list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-2);
  margin-top: 10px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 1px;
  background: var(--accent);
}

.checklist { list-style: none; margin-top: 26px !important; }
.checklist li {
  padding: 16px 0 16px 34px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  color: var(--fg-2);
  transition: padding-left var(--d) var(--e), color var(--d) var(--e-soft);
}
.checklist li:first-child { border-top: 1px solid var(--rule); }
.checklist li:hover { padding-left: 40px; color: var(--fg); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 4px; top: 22px;
  width: 6px; height: 11px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
}

.pullquote {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-optical-sizing: auto;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: 30px;
  margin-block: clamp(40px, 4.6vw, 64px) !important;
  max-width: 26ch;
}

/* Retrato / placeholder */
.portrait {
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  position: relative;
  overflow: hidden;
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(208,138,84,0.10), transparent 55%);
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(22px, 2.4vw, 30px) 56px clamp(22px, 2.4vw, 30px) 0;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.24;
  position: relative;
  transition: color var(--d-fast) var(--e-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary i {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 30px; height: 30px;
  margin-top: -15px;
  border: 1px solid var(--rule);
  transition: border-color var(--d) var(--e-soft), transform var(--d) var(--e);
}
.faq summary i::before,
.faq summary i::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--d) var(--e), opacity var(--d) var(--e);
}
.faq summary i::before { left: 8px; right: 8px; top: 50%; height: 1px; margin-top: -0.5px; }
.faq summary i::after { top: 8px; bottom: 8px; left: 50%; width: 1px; margin-left: -0.5px; }
.faq summary:hover i { border-color: var(--accent); }
.faq details[open] summary i::after { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary i { transform: rotate(180deg); }
.faq__body { overflow: hidden; transition: height 460ms var(--e); }
.faq__body p { color: var(--fg-2); max-width: 62ch; padding-bottom: 30px; font-size: var(--t-sm); }

/* ------------------------------------------------------------
   FORMULÁRIOS
   ------------------------------------------------------------ */
.form { display: flex; flex-direction: column; gap: 24px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
  font-family: var(--sans);
  font-size: var(--t-base);
  color: var(--fg);
  transition: border-color var(--d) var(--e-soft);
}
.field select { padding-right: 20px; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field textarea { min-height: 120px; resize: vertical; }

.consent {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: var(--t-xs);
  color: var(--fg-3);
  cursor: pointer;
  line-height: 1.6;
}
.consent input { width: auto; margin-top: 5px; accent-color: var(--accent); flex: none; }
.consent a { color: var(--accent); }

/* Multi-etapas */
.flow { border: 1px solid var(--rule); background: var(--bg); }
.flow__bar { height: 2px; background: var(--rule); }
.flow__fill { height: 100%; width: 25%; background: var(--accent); transition: width 560ms var(--e); }
.flow__body { padding: clamp(30px, 4vw, 60px); }
.flow__meta {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.flow__step { display: none; }
.flow__step.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .flow__step.active { animation: stepIn 500ms var(--e) both; }
}
@keyframes stepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.flow__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.flow__opts button {
  padding: 20px 22px;
  border: 1px solid var(--rule);
  background: transparent;
  font-size: var(--t-sm);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color var(--d) var(--e-soft), background var(--d) var(--e-soft), transform var(--d) var(--e);
}
.flow__opts button::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--d) var(--e);
}
.flow__opts button:hover { background: var(--bg-2); transform: translateX(4px); }
.flow__opts button:hover::before,
.flow__opts button.on::before { transform: scaleY(1); }
.flow__opts button.on { border-color: var(--accent); background: var(--bg-2); }
.flow__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; }
.flow__back {
  background: none;
  border: 0;
  color: var(--fg-3);
  font-size: var(--t-xs);
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--d-fast) var(--e-soft);
}
.flow__back:hover { color: var(--accent); }

/* ------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------ */
.site-footer { padding-block: clamp(64px, 8vw, 110px) 40px; position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 48%);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--rule);
}
.footer__brand p { color: var(--fg-2); font-size: var(--t-sm); max-width: 34ch; margin-top: 22px; }
.footer__col h4 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 20px;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__col a, .footer__col li { font-size: var(--t-sm); color: var(--fg-2); transition: color var(--d-fast) var(--e-soft); }
.footer__col a:hover { color: var(--accent); }
.footer__bot {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.footer__bot a:hover { color: var(--accent); }
.footer__note {
  margin-top: 22px;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 76ch;
}

/* ------------------------------------------------------------
   AÇÃO FLUTUANTE
   ------------------------------------------------------------ */
.float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 54px;
  padding-inline: 15px;
  background: var(--copper);
  color: #0A0C0D;
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 520ms var(--e), transform 520ms var(--e), gap var(--d) var(--e), padding-inline var(--d) var(--e);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.7);
}
.float.in { opacity: 1; transform: none; }
.float svg { width: 24px; height: 24px; flex: none; }
.float span {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width 460ms var(--e), opacity 300ms var(--e-soft);
}
.float:hover { gap: 11px; padding-inline: 18px 22px; }
.float:hover span { max-width: 190px; opacity: 1; }

.urgent-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 190;
  background: var(--copper);
  transform: translateY(100%);
  transition: transform 520ms var(--e);
}
.urgent-bar.in { transform: none; }
.urgent-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px;
  color: #0A0C0D;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Progresso de leitura */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 210;
  pointer-events: none;
}

/* ------------------------------------------------------------
   MOVIMENTO — revelações
   ------------------------------------------------------------ */
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.w-mask > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(110%);
  transition: transform 900ms var(--e);
  transition-delay: calc(var(--w, 0) * 34ms);
}
.split.visible .w-mask > i,
.split.on .w-mask > i { transform: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--e), transform 800ms var(--e); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.no-fade { opacity: 1; transform: none; }

.stagger { opacity: 0; transform: translateY(20px); }
.reveal.visible .stagger {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--e) calc(var(--i, 0) * 90ms), transform 700ms var(--e) calc(var(--i, 0) * 90ms);
}

/* Transição de página */
body { opacity: 1; transition: opacity 260ms var(--e-soft); }
body.leaving { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger { opacity: 1 !important; transform: none !important; transition: none !important; }
  .w-mask > i { transform: none !important; }
  .float, .urgent-bar { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------
   MENU MOBILE
   ------------------------------------------------------------ */
.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 12px 4px;
  z-index: 220;
}
.burger span {
  display: block;
  width: 26px; height: 1.5px;
  background: currentColor;
  margin: 6px 0;
  transition: transform 460ms var(--e), opacity 240ms var(--e-soft);
}
.burger.on span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 195;
  background: var(--void);
  padding: 110px var(--gut) 48px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 640ms var(--e);
  --fg: #F2F1EE;
  --fg-2: rgba(242,241,238,0.6);
  --fg-3: rgba(242,241,238,0.4);
  --rule: rgba(255,255,255,0.09);
  --accent: var(--copper);
  color: var(--fg);
}
.drawer.open { clip-path: inset(0 0 0 0); }
.drawer__link {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 16px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms var(--e) calc(var(--n, 0) * 55ms), transform 520ms var(--e) calc(var(--n, 0) * 55ms);
}
.drawer.open .drawer__link { opacity: 1; transform: none; }
.drawer__link .num { font-size: 0.6875rem; color: var(--accent); letter-spacing: 0.14em; }
.drawer__cta {
  margin-top: 28px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms var(--e) 400ms, transform 520ms var(--e) 400ms;
}
.drawer.open .drawer__cta { opacity: 1; transform: none; }
.drawer__cta .btn { width: 100%; }
.drawer__meta {
  margin-top: auto;
  padding-top: 36px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .idx { grid-template-columns: 60px minmax(0, 1fr) 44px; }
  .idx__d { grid-column: 2; margin-top: 10px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .duo, .duo--even { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .gridlines { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 92svh; padding-top: 130px; }
}

@media (max-width: 640px) {
  .masthead__inner, .masthead.solid .masthead__inner { height: 72px; }
  .brand__mark { width: 36px; height: 36px; font-size: 1.1rem; }
  .brand__name { font-size: 0.8125rem; letter-spacing: 0.16em; }
  .idx { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .idx__go { display: none; }
  .idx__d { grid-column: 2; }
  .stat-grid { grid-template-columns: 1fr; }
  .flow__opts { grid-template-columns: 1fr; }
  .term { grid-template-columns: 1fr; gap: 12px; }
  .cta-inline { flex-direction: column; align-items: flex-start; }
  .cta-inline .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero__where { gap: 26px; }
  .float { bottom: 20px; right: 20px; }
  .page--urgent .urgent-bar { display: block; }
  .page--urgent .float { bottom: 82px; }
}