/* ══════════════════════════════════════════════════════════════════
   Artificial Intelligence Consultoria — folha de estilo do site
   Fonte de verdade: DESIGN.md (na raiz do repositorio).
   NAO editar tokens aqui sem atualizar o DESIGN.md junto.
   ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   TOKENS — ver DESIGN.md. Valores canônicos em OKLCH nos comentários;
   hex é o que a página usa (sRGB previsível em todo navegador).
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* superfícies — tingidas para o hue 128 da própria marca, nunca para o quente */
  --surface-base:    #f5f8f1;   /* oklch(97.5% 0.010 128) */
  --surface-raised:  #eaefe5;   /* oklch(94.5% 0.014 128) */
  --surface-sunken:  #dce2d6;   /* oklch(90.5% 0.018 128) */

  /* marca */
  --sage:            #516636;   /* oklch(48%  0.075 128) — 5.93 / 5.44 / 4.81 */
  --sage-deep:       #384921;   /* oklch(38%  0.065 128) — 9.14 / 8.39 / 7.42 */
  --sage-quiet:      #7d8d69;   /* oklch(62%  0.055 128) — 3.33 · NUNCA texto */

  /* tinta */
  --ink:             #182315;   /* oklch(24%  0.030 140) — 15.18 / 13.93 / 12.32 */
  --ink-dim:         #4f584d;   /* oklch(45%  0.022 140) —  6.91 /  6.34 /  5.60 */
  --ink-muted:       #5b6359;   /* oklch(49%  0.018 140) —  5.80 /  5.33 /  4.71 */

  /* herança do sistema anterior, rebaixada a marca-texto (1.15:1 — só fundo) */
  --lime-marker:     #daf537;   /* oklch(92%  0.20  118) */

  --serif: 'Alegreya', Georgia, serif;
  --sans:  'Alegreya Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* escala 4pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-section: clamp(64px, 7.5vw, 104px);
  --gutter: clamp(20px, 5vw, 56px);

  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 100px;

  /* elevação — só para o que de fato flutua sobre o documento */
  --sh-overlay: 0 24px 64px -12px rgba(24, 35, 21, 0.18);
  --sh-sticky:  0 1px 24px -8px rgba(24, 35, 21, 0.12);
  --sh-lift:    0 8px 24px -8px rgba(24, 35, 21, 0.14);

  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --t-micro: 150ms; --t-comp: 260ms; --t-section: 420ms;

  /* escala semântica — nunca 999/9998/9999 */
  --z-base: 0; --z-dropdown: 100; --z-sticky: 200;
  --z-modal-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface-base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px — piso de corpo */
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: var(--lime-marker); color: var(--ink); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--sage); color: var(--surface-base);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-family: var(--sans); font-weight: 500; text-decoration: none;
  z-index: var(--z-toast);
  transition: top var(--t-micro) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ── tipografia base ────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

.display {
  font-size: clamp(2.75rem, 7vw, 6rem);   /* teto 96px */
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.headline {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.title {
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
em { font-style: italic; color: var(--sage); }
.prose { max-width: 68ch; }
.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 54ch;
}
.data {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
mark {
  background: var(--lime-marker);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 0.1em 0.35em;
  /* o marca-texto é um gesto de caneta: não pode partir em dois blocos */
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── botões ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 500;
  padding: 18px 32px; min-height: 44px;
  border: none; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.btn-primary { background: var(--sage); color: var(--surface-base); }
.btn-primary:hover, .btn-primary:active { background: var(--sage-deep); }
.btn-ghost { background: var(--surface-raised); color: var(--sage-deep); }
.btn-ghost:hover { background: var(--surface-sunken); }
.btn .chev { transition: transform var(--t-micro) var(--ease); }
.btn:hover .chev { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════
   NAV — superfície sólida. Sem backdrop-filter (vira faixa suja no claro).
   ══════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  background: var(--surface-base);
  transition: box-shadow var(--t-comp) var(--ease);
}
.nav.is-stuck { box-shadow: var(--sh-sticky); }
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 72px;
}
.logo {
  font-family: var(--serif); font-size: 1.375rem; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none;
}
.logo-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--sage);
  position: relative;
}
.logo-mark::after {
  content: ''; position: absolute; inset: 7px 5px 7px 9px;
  background: var(--surface-base); border-radius: 50%;
}
.nav-cta {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  padding: 12px 18px; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.nav-cta:hover { background: var(--sage); color: var(--surface-base); }

/* ══════════════════════════════════════════════════════════════════
   HERO — composição assimétrica: texto à esquerda, foto sangrando
   pela direita. A foto é o problema que a consultoria resolve.
   ══════════════════════════════════════════════════════════════════ */
.hero {
  padding-top: clamp(112px, 14vh, 152px);
  padding-bottom: clamp(36px, 4vw, 56px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 38%);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-inline: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
}
.hero h1 { margin-bottom: var(--s-6); }
.hero .lead { margin-bottom: var(--s-7); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
  padding-top: var(--s-5);
}
.hero-meta dt {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--s-1);
}
.hero-meta dd { font-size: 0.9375rem; color: var(--ink); line-height: 1.45; }

/* entrada única do herói — não é revelação por scroll em toda seção */
.no-js .hero-rise { opacity: 1; transform: none; }
.js .hero-rise { opacity: 0; transform: translateY(14px); animation: rise 700ms var(--ease) forwards; }
.js .hero-rise-1 { animation-delay: 60ms; }
.js .hero-rise-2 { animation-delay: 160ms; }
.js .hero-rise-3 { animation-delay: 260ms; }
.js .hero-rise-4 { animation-delay: 360ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── TROCA: necessidade -> resultado ───────────────────────────────
   Os quatro pares existem SEMPRE no HTML como lista completa. Sem JS,
   com reduced-motion, ou se o ciclo falhar, aparecem todos. A animacao
   e camada de apresentacao, nunca condicao de existencia do conteudo. */
.troca { list-style: none; display: flex; flex-direction: column; gap: var(--s-7); }
.troca-item { display: flex; flex-direction: column; gap: var(--s-2); }
.troca-setor {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage);
}
.troca-de {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.4;
  color: var(--ink-dim); max-width: 26ch;
}
.troca-de::before { content: '“'; }
.troca-de::after  { content: '”'; }
.troca-seta {
  width: 1px; height: 40px; background: var(--sage-quiet);
  margin: var(--s-2) 0 var(--s-2) 10px; position: relative; flex-shrink: 0;
}
.troca-seta::after {
  content: ''; position: absolute; bottom: 0; left: -3px;
  width: 7px; height: 7px; border-right: 1px solid var(--sage-quiet);
  border-bottom: 1px solid var(--sage-quiet); transform: rotate(45deg);
}
.troca-para {
  font-family: var(--serif); font-size: clamp(3.25rem, 6vw, 5rem);
  font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  color: var(--sage-deep); font-variant-numeric: tabular-nums;
}
.troca-nota { font-size: 1.0625rem; color: var(--ink-dim); max-width: 28ch; }

/* estado ciclando — so entra por JS */
.troca.is-cycling { position: relative; display: block; }
.troca.is-cycling .troca-item {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-section) var(--ease), transform var(--t-section) var(--ease);
}
.troca.is-cycling .troca-item.is-current { opacity: 1; transform: none; }

.troca-controle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5); padding: 10px 16px; min-height: 44px;
  background: var(--surface-raised); color: var(--ink-dim);
  border: none; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.troca-controle:hover { background: var(--surface-sunken); color: var(--ink); }
.troca-controle:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.troca-progresso { display: flex; gap: 5px; }
.troca-progresso i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sage-quiet); display: inline-block;
}
.troca-progresso i.on { background: var(--sage-deep); }

@media (prefers-reduced-motion: reduce) {
  .troca.is-cycling { position: static; display: flex; }
  .troca.is-cycling .troca-item {
    position: static; opacity: 1; transform: none; transition: none;
  }
  .troca-controle { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SEÇÕES
   ══════════════════════════════════════════════════════════════════ */
.section { padding-block: var(--s-section); }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 32ch; }
.section-head.has-lead { margin-bottom: var(--s-5); }
.section-lead {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.6;
  color: var(--ink-dim); max-width: 58ch;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.section-head.wide { max-width: 34ch; }

/* ── ABORDAGEM ── sequência real (diagnóstico → desenho → entrega),
   por isso a numeração é informação e não andaime decorativo.
   Colunas escalonadas em vez de três cards idênticos. ─────────────── */
.processo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.etapa { display: flex; flex-direction: column; gap: var(--s-3); }
.etapa-num {
  font-family: var(--serif); font-size: 3.25rem; font-weight: 400;
  line-height: 1; color: var(--sage);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.etapa-fase {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}
.etapa h3 { margin-top: var(--s-2); }
.etapa p { color: var(--ink-dim); font-size: 1rem; }
@media (min-width: 900px) {
  .etapa:nth-child(2) { margin-top: var(--s-6); }
  .etapa:nth-child(3) { margin-top: calc(var(--s-6) * 2); }
}

/* ── SISTEMAS EM OPERAÇÃO ──────────────────────────────────────────
   Índice de obra, não grade de cards: linhas densas, duas colunas,
   sem painel e sem contorno. Contrasta de propósito com a seção de
   casos (que é texto + painel de resultado). */
.sistemas { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.sistema {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
}
.sistema-meta { display: flex; flex-direction: column; gap: var(--s-2); }
.sistema-tipo {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage);
}
.sistema-para {
  font-family: var(--sans); font-size: 0.875rem; color: var(--ink-muted);
  line-height: 1.45;
}
.sistema h3 { margin-bottom: var(--s-3); }
.sistema p { color: var(--ink-dim); max-width: 62ch; }
.sistema-fatos {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}
.sistema-fatos li {
  list-style: none;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface-raised);
  padding: 6px 12px; border-radius: var(--r-pill);
}
@media (max-width: 720px) {
  .sistema { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ── CASOS ─────────────────────────────────────────────────────── */
.casos { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 112px); }
.caso {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.caso-setor {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage); margin-bottom: var(--s-3);
}
.caso h3 { margin-bottom: var(--s-4); }
.caso-desc { color: var(--ink-dim); }

/* painel de resultados — superfície elevada, sem borda, sem sombra */
.resultados {
  background: var(--surface-raised);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.resultados-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.resultados-titulo {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}
/* legenda — identidade nunca só por cor: o texto nomeia cada marca */
.legenda { display: flex; gap: var(--s-4); }
.legenda span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legenda .k-antes { background: var(--sage-quiet); }
.legenda .k-depois { background: var(--sage); }

.metrica { margin: 0; }
.metrica-delta {
  font-family: var(--serif); font-size: clamp(2.25rem, 3.6vw, 2.75rem);
  font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  color: var(--sage-deep); font-variant-numeric: tabular-nums;
}
.metrica-label {
  font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-dim);
  margin-top: var(--s-1); margin-bottom: var(--s-3);
}
.metrica-plot { position: relative; padding-top: 20px; }
.metrica svg { width: 100%; height: auto; display: block; overflow: visible; }
/* rótulo direto sobre o ponto "depois" — o número que a frase acima promete */
.tick {
  position: absolute; top: 0; left: var(--x); transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  color: var(--sage-deep); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metrica-escala {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
  margin-top: var(--s-2);
}
.metrica-nota {
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--ink-muted); line-height: 1.5; max-width: 46ch;
}

/* revelação só das figuras de resultado.
   O padrão é VISÍVEL: o estado escondido só é aplicado por JS, só a quem já
   está abaixo da dobra, e cai por tempo mesmo que o observer nunca dispare.
   Conteúdo real nunca fica refém de uma classe. */
.reveal {
  opacity: 1; transform: none;
  transition: opacity var(--t-section) var(--ease), transform var(--t-section) var(--ease);
}
.reveal.will-reveal { opacity: 0; transform: translateY(12px); }

/* ── MANIFESTO — a única inversão total. O verde é a superfície. ── */
.manifesto {
  background: var(--sage);
  color: var(--surface-base);
  padding-block: clamp(88px, 11vw, 144px);
}
.manifesto blockquote {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 400; font-style: italic;
  line-height: 1.22; letter-spacing: -0.02em;
  max-width: 20ch; text-wrap: balance;
}
.manifesto blockquote em { color: var(--surface-base); font-style: italic; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.manifesto figcaption {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245, 248, 241, 0.78);
  margin-top: var(--s-6);
}

/* ── CTA ───────────────────────────────────────────────────────── */
.cta { background: var(--surface-sunken); padding-block: var(--s-section); }
.cta h2 { margin-bottom: var(--s-6); max-width: 14ch; }
.cta .lead { margin-bottom: var(--s-7); color: var(--ink-dim); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.cta-email {
  font-family: var(--mono); font-size: 0.875rem;
  color: var(--sage-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  padding: 12px 0; display: inline-flex; align-items: center; min-height: 44px;
}
.cta-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5); margin-top: var(--s-8);
  max-width: 720px;   /* agrupa os três itens em vez de espalhá-los por 1200px */
}
.cta-meta dt {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--s-1);
}
.cta-meta dd { font-size: 0.9375rem; color: var(--ink); }

/* ── FOOTER ────────────────────────────────────────────────────── */
.footer { background: var(--surface-sunken); padding-block: var(--s-6); }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--ink-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.footer-legal a {
  color: var(--ink-muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--t-micro) var(--ease);
}
.footer-legal a:hover {
  color: var(--sage-deep);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ── RESPONSIVO ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .caso { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}
@media (max-width: 520px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }
}

/* ── MOVIMENTO REDUZIDO — obrigatório, sem exceção ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .hero-rise { opacity: 1; transform: none; animation: none; }
  .reveal, .reveal.will-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PAGINAS INTERNAS
   Adicionado na v1.4.0, quando o site deixou de ser uma pagina so.
   ══════════════════════════════════════════════════════════════════ */
.pagina-topo { padding-top: clamp(112px, 14vh, 152px); padding-bottom: 0; }
.pagina-topo .headline { max-width: 24ch; margin-bottom: var(--s-5); }
.pagina-topo .section-lead { margin-bottom: 0; }

/* migalhas — navegacao, nao eyebrow decorativo */
.migalhas { margin-bottom: var(--s-5); }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.migalhas li {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.migalhas li + li::before { content: '/'; margin-right: var(--s-2); color: var(--sage-quiet); }
.migalhas a {
  color: var(--ink-muted); text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.migalhas a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 4px; }
.migalhas li[aria-current="page"] { color: var(--sage-deep); }

/* titulo que vira link, sem virar azul de navegador */
.sistema-link {
  color: inherit; text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.sistema-link:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 5px; }

/* .sistemas passou a ser <ul>; zera a marcacao de lista */
.sistemas { list-style: none; }
.sistemas > li { list-style: none; }

/* prosa longa das paginas internas */
.prosa h2 { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.02em;
  margin-top: var(--s-8); margin-bottom: var(--s-4); max-width: 26ch; }
.prosa h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prosa p { max-width: 68ch; margin-bottom: var(--s-4); color: var(--ink-dim); }
.prosa p strong { color: var(--ink); font-weight: 600; }
.prosa ul { margin: 0 0 var(--s-5) 0; padding-left: 0; list-style: none; max-width: 68ch; }
.prosa ul li {
  position: relative; padding-left: var(--s-5); margin-bottom: var(--s-3);
  color: var(--ink-dim);
}
.prosa ul li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage-quiet);
}
.prosa a { color: var(--sage-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--sage); }

/* nenhum link pode cair no estilo padrao do navegador */
main a:not([class]) {
  color: var(--sage-deep);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--t-micro) var(--ease);
}
main a:not([class]):hover { color: var(--sage); }

/* titulo de secao secundaria dentro de pagina interna */
.section-head.menor .headline { font-size: clamp(1.75rem, 3vw, 2.25rem); max-width: 30ch; }

/* relacionados — links, nao linhas ricas */
.secao-relacionados { padding-block: clamp(48px, 5vw, 72px); }
.relacionados-titulo {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--s-5);
}
.relacionados {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  max-width: 900px;
}
.relacionado { display: flex; flex-direction: column; gap: var(--s-1); }
.relacionado-tipo {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage);
}
.relacionado-link {
  font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--t-micro) var(--ease);
}
.relacionado-link:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 5px; }

/* a secao anterior ja traz respiro: relacionados nao acrescenta o proprio */
.secao-relacionados { padding-top: 0; }
/* CTA de pagina interna usa .headline; 14ch (do .cta h2) espremia em 3 linhas */
.cta .headline { max-width: 20ch; }