/* ============================================================
   Nexo MD — Assessoria Médico-Legal
   Sistema visual: azul-marinho profundo, acento água,
   Libre Caslon Display (voz) + IBM Plex Sans (texto).
   O traço contínuo é o motivo condutor: cada dispositivo
   estrutural desenha a ligação entre evidência e conclusão.
   ============================================================ */

:root {
  /* Base */
  --abyss:     #031a2b;
  --navy:      #062f4f;
  --navy-lit:  #0b4a75;
  --aqua:      #68b6c8;
  --aqua-lit:  #9ad9e6;
  --paper:     #f5f8f9;
  --ice:       #e9f1f4;
  --ink:       #0e2433;
  --slate:     #57707f;

  /* Derivados */
  --rule:        rgba(6, 47, 79, .14);
  --rule-strong: rgba(6, 47, 79, .26);
  --rule-dark:   rgba(255, 255, 255, .14);
  --on-dark:     rgba(233, 243, 247, .78);

  /* Tipografia */
  --display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --brand-serif: "Frank Ruhl Libre", Georgia, serif;
  --brand-sans: "Montserrat", "IBM Plex Sans", system-ui, sans-serif;
  --text:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Métrica */
  --shell: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(4.5rem, 9vw, 8rem);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--text);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--aqua-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--navy);
  color: #fff;
  font-size: .9rem;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Tipografia de seção ─────────────────────────────────── */
h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  line-height: 1.03;
  letter-spacing: -.022em;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}

h3 {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.lede {
  max-width: 58ch;
  color: var(--slate);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

/* ── Botões ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  font: 500 .94rem/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .22s, color .22s, border-color .22s, transform .22s;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-lit); }

.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--aqua-lit); color: var(--abyss); }

.btn-ghost { border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn-ghost:hover { border-color: var(--aqua-lit); background: rgba(154, 217, 230, .1); }

/* Os pedidos de análise abrem conversa no WhatsApp: o verde da marca deles
   avisa para onde o clique leva antes do ícone ser lido */
.btn-whatsapp { gap: .6rem; background: #25b35a; color: #fff; font-weight: 600; }
.btn-whatsapp:hover { background: #1f9d4f; }
.btn-icon { width: 1.3em; height: 1.3em; flex: none; }

/* ── Masthead ────────────────────────────────────────────── */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.masthead.is-stuck {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 24px rgba(3, 26, 43, .07);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  text-decoration: none;
}
/* A marca troca de versão conforme o fundo: clara sobre o herói, marinho depois */
.brand-mark { display: grid; width: 34px; }
.brand-mark > img { grid-area: 1 / 1; width: 34px; height: 34px; transition: opacity .3s; }

/* O nome sai por extenso ao lado do símbolo, nas mesmas fontes do lockup:
   o nome na serifada pesada, o descritivo na geométrica. Alinhado pela base
   para o hífen sentar na linha das palavras. */
.brand-word {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: #fff;
  font-family: var(--brand-sans);
  line-height: 1;
  transition: color .3s;
}
.masthead.is-stuck .brand-word { color: var(--navy); }

.brand-name {
  font-family: var(--brand-serif);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* No logo o "MD" sai na geométrica, fina; a Montserrat tem versal mais alta
   (0,70 contra 0,66 em), então encolhe para as duas alturas coincidirem */
.brand-md { font-family: var(--brand-sans); font-size: .94em; font-weight: 400; letter-spacing: .02em; }
.brand-dash { font-size: 1.05rem; opacity: .5; }
.brand-tagline { font-size: .98rem; font-weight: 400; opacity: .8; letter-spacing: .01em; white-space: nowrap; }

.masthead .on-light { opacity: 0; }
.masthead.is-stuck .on-light { opacity: 1; }
.masthead.is-stuck .on-dark { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .brand-mark > img { transition: none; }
  .brand-word { transition: none; }
}

.masthead-nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.masthead-nav a {
  position: relative;
  padding-block: .35rem;
  color: rgba(255, 255, 255, .82);
  font-size: .93rem;
  text-decoration: none;
  transition: color .2s;
}
.masthead.is-stuck .masthead-nav a { color: var(--slate); }
.masthead-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--aqua);
  transition: right .28s ease;
}
.masthead-nav a:hover { color: #fff; }
.masthead.is-stuck .masthead-nav a:hover { color: var(--navy); }
.masthead-nav a:hover::after { right: 0; }

/* Mesma ação dos botões verdes (conversa no WhatsApp), mas em contorno: na
   barra, que acompanha toda a rolagem, o verde cheio pesaria. O ícone avisa o
   destino; a cor acompanha o fundo da barra, como o resto do cabeçalho. */
.masthead-cta {
  gap: .5rem;
  min-height: 44px;
  padding: .66rem 1.3rem;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
}
.masthead-cta:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.masthead.is-stuck .masthead-cta { border-color: rgba(6, 47, 79, .45); color: var(--navy); }
.masthead.is-stuck .masthead-cta:hover { border-color: var(--navy); background: rgba(6, 47, 79, .06); }
.masthead-cta .btn-icon { width: 1.15em; height: 1.15em; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  margin: 5px auto;
  background: #fff;
  transition: transform .26s, opacity .26s;
}
.masthead.is-stuck .menu-toggle span { background: var(--navy); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.menu-panel {
  display: none;
  flex-direction: column;
  padding: .5rem var(--gutter) 1.5rem;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.menu-panel a {
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
  font-size: 1rem;
  text-decoration: none;
}
.menu-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  border: 1px solid rgba(6, 47, 79, .45) !important;
  font-weight: 600;
}
.menu-panel-cta .btn-icon { width: 1.15em; height: 1.15em; }

/* ── Trilha de progresso ─────────────────────────────────── */
/* A trilha fica fixa sobre faixas claras e escuras, então as cores vêm de
   variáveis que o JS alterna (.on-dark) conforme a faixa atrás dela. */
.spine {
  --line: rgba(6, 47, 79, .2);
  --dot: rgba(6, 47, 79, .3);
  --text: var(--slate);
  --text-strong: var(--navy);
  --panel: rgba(255, 255, 255, .95);
  --panel-edge: var(--rule);
  position: fixed;
  top: 50%;
  left: clamp(.75rem, 1.6vw, 1.5rem);
  z-index: 90;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.spine.on-dark {
  --line: rgba(233, 243, 247, .22);
  --dot: rgba(233, 243, 247, .42);
  --text: rgba(233, 243, 247, .72);
  --text-strong: #fff;
  --panel: rgba(3, 26, 43, .92);
  --panel-edge: rgba(255, 255, 255, .1);
}
.spine.is-visible { opacity: 1; visibility: visible; }

/* painel que se abre ao passar o mouse ou focar: todos os destinos legíveis */
.spine::before {
  content: "";
  position: absolute;
  top: -.85rem; bottom: -.85rem; left: -.6rem;
  width: 11rem;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 10px 32px rgba(3, 26, 43, .14);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, background-color .3s, border-color .3s;
}
.spine:hover::before,
.spine:focus-within::before { opacity: 1; }

/* trilho de centro a centro do primeiro ao último ponto (links de 18px) */
.spine-rail {
  position: absolute;
  top: 9px; bottom: 9px; left: 11px;
  width: 1px;
  background: var(--line);
  transition: background-color .3s;
}
.spine-fill {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 0;
  background: var(--aqua);
}

.spine ol { position: relative; display: grid; gap: .8rem; }

.spine a {
  position: relative;
  display: block;
  width: 24px; height: 18px;
  text-decoration: none;
}
/* ponto: futuro (neutro), lido (água), corrente (água, maior, com halo) */
.spine a::before {
  content: "";
  position: absolute;
  top: 6.5px; left: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dot);
  transition: transform .25s, background-color .25s, box-shadow .25s;
}
.spine a.is-past::before { background: var(--aqua); }
.spine a.is-current::before {
  background: var(--aqua);
  transform: scale(1.8);
  box-shadow: 0 0 0 2px rgba(104, 182, 200, .25);
}

.spine a span {
  position: absolute;
  top: 50%; left: 30px;
  color: var(--text);
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity .22s, transform .22s, color .2s;
}
.spine a.is-current span { color: var(--text-strong); font-weight: 500; }
.spine a:hover span { color: var(--text-strong); }
.spine:hover a span,
.spine:focus-within a span { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }

/* rótulo corrente sempre visível só onde há margem livre à esquerda do conteúdo */
@media (min-width: 1440px) {
  .spine a.is-current span { opacity: 1; transform: translate(0, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .spine, .spine::before, .spine a::before, .spine a span { transition: none; }
}

/* ── Faixas ──────────────────────────────────────────────── */
.band { padding-block: var(--band-y); }
.band-paper { background: var(--paper); }
.band-ice   { background: var(--ice); }
.band-navy  { background: var(--navy); color: #fff; }
.band-abyss { background: var(--abyss); color: #fff; }

.band-navy .lede,
.band-abyss .lede { color: var(--on-dark); }

.band-head { max-width: 62ch; margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.band-head h2 + .lede { margin-top: 1.1rem; }

/* ── Herói ───────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: clamp(8rem, 14vw, 11rem);
  background: linear-gradient(158deg, var(--abyss) 0%, var(--navy) 46%, #0a4a76 100%);
  color: #fff;
  overflow: hidden;
}

/* luz difusa; os anéis concêntricos vivem no SVG, centrados no nexo */
.hero-field {
  position: absolute;
  top: -28%;
  right: -16%;
  width: min(120vh, 1180px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(104, 182, 200, .15), transparent 62%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.5rem;
  color: var(--aqua-lit);
  font-size: .88rem;
  letter-spacing: .015em;
}
.hero-kicker::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--aqua);
}

.hero h1 { max-width: 13ch; }

.hero-copy {
  max-width: 46ch;
  margin-top: 1.75rem;
  color: rgba(233, 243, 247, .82);
  font-size: clamp(1.02rem, 1.35vw, 1.13rem);
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.5rem;
}

/* ── Diagrama do nexo ────────────────────────────────────── */
.nexus { width: 100%; margin: 0; }
.nexus svg { display: block; width: 100%; height: auto; overflow: visible; }

.nx-waves circle { fill: none; stroke: var(--aqua-lit); stroke-width: 1; }

.nx-axis { stroke: rgba(154, 217, 230, .34); stroke-width: 1; }

.nx-threads path {
  fill: none;
  stroke: url(#thread);
  stroke-width: 1.25;
}

.nx-record circle {
  fill: var(--navy);
  stroke: var(--aqua-lit);
  stroke-width: 1.5;
}
.nx-record text {
  fill: rgba(233, 243, 247, .66);
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: .02em;
  text-anchor: middle;
}

.nx-ring { fill: none; stroke: var(--aqua-lit); stroke-width: 1; opacity: .5; }
.nx-core { fill: var(--aqua-lit); }
.nx-node-label {
  fill: var(--aqua-lit);
  font-family: var(--data);
  font-size: 13px;
  letter-spacing: .04em;
  text-anchor: middle;
}

/* Um único momento orquestrado, em três tempos:
   o eixo corre e os registros pousam nele → os fios sobem juntos → o nexo se firma.
   Com pathLength="1", dasharray/offset são frações do traço, qualquer que seja o comprimento. */
@media (prefers-reduced-motion: no-preference) {
  .nexus.is-armed .nx-axis {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
    animation: draw .8s cubic-bezier(.4, 0, .2, 1) forwards;
  }
  .nexus.is-armed .nx-record {
    opacity: 0;
    animation: rise .45s ease-out forwards;
    animation-delay: calc(.1s + var(--i) * .13s);
  }
  .nexus.is-armed .nx-threads path {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
    animation: draw 1.1s cubic-bezier(.45, 0, .2, 1) forwards;
    animation-delay: calc(.85s + var(--i) * .07s);
  }
  .nexus.is-armed .nx-node > * { opacity: 0; animation: appear .6s ease-out forwards 2s; }
  .nexus.is-armed .nx-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: settle .8s cubic-bezier(.2, .8, .3, 1) forwards 2s;
  }
  .nexus.is-armed .nx-waves circle {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 470px 110px;
    animation: wave 1.4s cubic-bezier(.2, .7, .3, 1) forwards;
    animation-delay: calc(2.1s + var(--i) * .14s);
  }
}

@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes rise   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.7); } to { opacity: .5; transform: scale(1); } }
@keyframes wave   { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ── Princípio de atuação ────────────────────────────────── */
.tenet {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(3, 26, 43, .34);
}
.tenet-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.tenet blockquote {
  margin: 0;
  max-width: 24ch;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  color: #fff;
}

/* os três princípios ligados por um traço — não numerados, porque não são etapas */
.tenet-list {
  display: flex;
  align-items: center;
  gap: 0;
}
.tenet-list li {
  display: flex;
  align-items: center;
  color: var(--aqua-lit);
  font-size: .88rem;
  white-space: nowrap;
}
.tenet-list li + li::before {
  content: "";
  width: clamp(1.25rem, 3vw, 2.75rem);
  height: 1px;
  margin-inline: .9rem;
  background: rgba(154, 217, 230, .38);
}

/* ── Sobre ───────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split-head h2 { max-width: 15ch; }
.split-head .lede { margin-top: 1.4rem; }

.split-body {
  display: grid;
  gap: 1.4rem;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--rule);
  max-width: 62ch;
  color: #21414f;
}

/* ── Método ──────────────────────────────────────────────── */
/* Árvore ortogonal desenhada sobre o próprio grid: cada ramo parte do ponto da
   sua coluna, a barra une as três e a haste sobe até a conclusão. As posições
   derivam de --gap, então a ligação fica exata em qualquer largura. */
.bases {
  --gap: clamp(1.5rem, 3.5vw, 3rem);
  --label: 1.5rem;   /* linha do rótulo da conclusão */
  --stem: 2.25rem;   /* conclusão → barra */
  --rise: 2.75rem;   /* barra → pontos das bases */
  --wire: rgba(154, 217, 230, .4);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: calc(var(--label) + var(--stem) + var(--rise));
}

/* barra: do ramo da 1ª coluna (x=0) ao da 3ª (x = (2W + 2gap) / 3) */
.bases::before {
  content: "";
  position: absolute;
  top: calc(var(--label) + var(--stem));
  left: 3px;
  width: calc((200% + 2 * var(--gap)) / 3 + 1px);
  height: 1px;
  background: var(--wire);
}

/* conclusão, sobre a coluna do meio (x = (W + gap) / 3), com haste até a barra */
.bases-apex {
  position: absolute;
  top: 0;
  left: calc((100% + var(--gap)) / 3);
  padding-left: 1.1rem;
  color: var(--aqua-lit);
  font: 400 .8rem/var(--label) var(--data);
  letter-spacing: .02em;
  white-space: nowrap;
}
.bases-apex::before {
  content: "";
  position: absolute;
  top: calc(var(--label) / 2 - 4px);
  left: -.5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aqua-lit);
  box-shadow: 0 0 0 4px rgba(154, 217, 230, .14);
}
.bases-apex::after {
  content: "";
  position: absolute;
  top: calc(var(--label) / 2);
  left: 3px;
  width: 1px;
  height: calc(var(--label) / 2 + var(--stem));
  background: var(--wire);
}

.base { position: relative; padding-top: 1.5rem; }
.base::before {
  content: "";
  position: absolute;
  top: -3.5px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aqua);
}
/* ramo: da barra até o ponto da coluna */
.base::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 3px;
  width: 1px;
  height: var(--rise);
  background: var(--wire);
}
.base h3 { color: #fff; }
.base p {
  margin-top: .85rem;
  color: var(--on-dark);
  font-size: .96rem;
  max-width: 40ch;
}

/* ── Atuação ─────────────────────────────────────────────── */
/* grelha de hairlines colapsadas — um registro, não seis cartões */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.entry {
  position: relative;
  padding: clamp(1.75rem, 2.6vw, 2.4rem);
  background: var(--paper);
  transition: background-color .28s;
}
.entry::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--aqua);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.entry:hover { background: #fff; }
.entry:hover::before { transform: scaleY(1); }

.entry h3 { color: var(--navy); }
.entry p {
  margin-top: .8rem;
  color: var(--slate);
  font-size: .94rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .entry, .entry::before { transition: none; }
}

/* ── Tecnologia ──────────────────────────────────────────── */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 0;
}

.stage {
  position: relative;
  padding: 2.6rem 1.4rem 0 0;
  border-top: 1px solid var(--rule-dark);
}
/* o marcador numérico é legítimo: aqui há ordem real de processamento */
.stage-num {
  position: absolute;
  top: -14px; left: 0;
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  border: 1px solid rgba(154, 217, 230, .4);
  border-radius: 50%;
  background: var(--navy);
  color: var(--aqua-lit);
  font: 500 .76rem/1 var(--data);
}
/* seta de fluxo entre estágios */
.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1px; right: 1.4rem;
  width: 5px; height: 5px;
  border-top: 1px solid rgba(154, 217, 230, .55);
  border-right: 1px solid rgba(154, 217, 230, .55);
  transform: translateY(-2px) rotate(45deg);
}

.stage h3 { color: #fff; font-size: .99rem; }
.stage p {
  margin-top: .55rem;
  color: rgba(233, 243, 247, .6);
  font-size: .88rem;
  line-height: 1.55;
}

.stage-final { border-top-color: var(--aqua); }
.stage-final .stage-num {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--abyss);
}
.stage-final h3 { color: var(--aqua-lit); }

.pipeline-note {
  max-width: 68ch;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  color: var(--on-dark);
  font-size: .97rem;
}

/* ── Para quem ───────────────────────────────────────────── */
.audiences {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
}
.audience { padding-top: 1.4rem; border-top: 2px solid var(--navy); }
.audience h3 { color: var(--navy); }
.audience p {
  margin-top: .8rem;
  color: var(--slate);
  font-size: .95rem;
  max-width: 36ch;
}

/* ── Ecossistema ─────────────────────────────────────────── */
.ecosystem {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.5rem);
}
.ecosystem-copy h2 { max-width: 16ch; }
.ecosystem-copy p {
  margin-top: 1.35rem;
  max-width: 54ch;
  color: #2b4a59;
}
.ecosystem-place {
  color: var(--slate) !important;
  font-size: .89rem;
  font-family: var(--data);
  letter-spacing: -.01em;
}

.ecosystem-badge {
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid var(--rule);
  text-align: center;
}
.ecosystem-badge img {
  width: 100%;
  max-width: 360px;
  height: auto;
}
.ecosystem-badge figcaption {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: .84rem;
}

/* ── Convite ─────────────────────────────────────────────── */
.invite { max-width: 780px; }
.invite h2 { max-width: 18ch; }
.invite p {
  margin-top: 1.35rem;
  max-width: 56ch;
  color: var(--on-dark);
}
.invite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.invite-mail {
  color: var(--aqua-lit);
  font-family: var(--data);
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 217, 230, .35);
  padding-bottom: 2px;
  transition: border-color .2s;
}
.invite-mail:hover { border-bottom-color: var(--aqua-lit); }

/* ── Rodapé ──────────────────────────────────────────────── */
.colophon {
  padding-top: clamp(3.5rem, 6vw, 5rem);
  background: var(--navy);
  color: #fff;
}
.colophon-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.colophon-brand img { width: 150px; height: auto; }

.colophon-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.colophon-nav a {
  color: var(--on-dark);
  font-size: .92rem;
  text-decoration: none;
  transition: color .2s;
}
.colophon-nav a:hover { color: var(--aqua-lit); }

.colophon-lab {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--rule-dark);
}
.colophon-lab img { width: 54px; height: auto; flex: none; }
.colophon-lab p {
  color: rgba(233, 243, 247, .62);
  font-size: .8rem;
  line-height: 1.5;
}
.colophon-lab strong { color: #fff; font-weight: 500; }

.colophon-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  color: rgba(233, 243, 247, .6); /* .5 reprovava em AA no corpo de 13px */
  font-size: .83rem;
}

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 1220px) {
  .spine { display: none; }
}

/* Com o menu e o CTA disputando a barra, a linha única encosta na navegação:
   abaixo disto o descritivo desce para baixo do nome, ainda ao lado do símbolo,
   como no lockup horizontal. */
@media (max-width: 1120px) {
  /* inline-grid: nome e descritivo ficam com a mesma largura, e o fio sob
     o nome corre de ponta a ponta, como no lockup */
  .brand-word { display: inline-grid; gap: .3rem; }
  .brand-dash { display: none; }
  .brand-name {
    padding-bottom: .22rem;
    border-bottom: 1px solid currentColor;
    font-size: 1.66rem;
    letter-spacing: .03em;
    /* centrado sobre o fio; o recuo compensa o espaçamento que sobra
       depois da última letra */
    padding-left: .03em;
    text-align: center;
  }
  .brand-tagline { font-size: .7rem; opacity: .9; letter-spacing: 0; }
  .brand-mark, .brand-mark > img { width: 46px; height: 46px; }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* width explícito: com margin auto o item do grid encolhe ao conteúdo
     e o SVG cai no tamanho padrão de 300px */
  .nexus { width: 100%; max-width: 560px; margin-inline: auto; order: 2; }
  .ledger, .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage:nth-child(2n)::after { display: none; }
  .ecosystem { grid-template-columns: 1fr; }
  .colophon-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .colophon-lab { padding-left: 0; border-left: 0; }
}

@media (max-width: 860px) {
  .masthead-nav, .masthead-cta { display: none; }
  .menu-toggle { display: block; }
  .menu-panel:not([hidden]) { display: flex; }

  .split, .audiences, .bases { grid-template-columns: 1fr; }
  .split-body { padding-left: 0; border-left: 0; }
  /* empilhadas, as bases passam a pender de um trilho vertical */
  .bases { padding: 0 0 0 1.6rem; }
  .bases::before { top: .5rem; bottom: 2.5rem; width: 1px; height: auto; }
  .bases-apex { display: none; }
  .base { padding-top: 0; }
  .base::before { top: .5rem; left: -1.6rem; }
  .base::after { content: none; }

  .tenet-inner { grid-template-columns: 1fr; }
  /* empilhados, os traços de ligação perdem sentido: viram marcadores */
  .tenet-list { display: grid; gap: .55rem; }
  .tenet-list li + li::before { content: none; }
  .tenet-list li::after {
    content: "";
    order: -1;
    width: 18px; height: 1px;
    margin-right: .8rem;
    background: rgba(154, 217, 230, .45);
  }

  .stage { padding-top: 2.4rem; }
}

@media (max-width: 640px) {
  .ledger { grid-template-columns: 1fr; }

  /* empilhada, a esteira vira lista: o número volta ao fluxo para não colidir */
  .pipeline { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .85rem;
    align-items: center;
    padding: 1.5rem 0 0;
  }
  /* precisa igualar a especificidade de .stage:not(:last-child)::after */
  .stage:not(:last-child)::after { content: none; }
  .stage-num { position: static; }
  .stage p { grid-column: 2; margin-top: .4rem; }

  /* O nome em texto cabe onde a imagem do wordmark não cabia */
  .brand-name { font-size: 1.58rem; }
  .brand-tagline { font-size: .67rem; }
  .brand-mark, .brand-mark > img { width: 44px; height: 44px; }


  .hero-actions .btn { flex: 1 1 100%; }
  .invite-actions { gap: 1.1rem; }
  .colophon-foot { justify-content: center; text-align: center; }
}

/* Telefones: a figura do herói sangra até as bordas e o desenho engrossa.
   Medidas SVG estão em unidades do viewBox — cada uma vale ~0,68px a 360px e
   ~0,8px a 424px —, por isso os valores maiores. Acima de 520px a figura já tem
   largura suficiente com os tamanhos normais. */
@media (max-width: 520px) {
  .nexus { width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  /* Nesta escala a mono fica larga demais para cinco rótulos numa fileira;
     a Plex Sans, proporcional, cabe com cada rótulo sob o seu ponto. */
  .nx-record text {
    font-family: var(--text);
    font-size: 17px;
    letter-spacing: 0;
    fill: rgba(233, 243, 247, .74);
  }
  .nx-record circle { r: 6.5px; stroke-width: 2; }
  .nx-threads path { stroke-width: 1.7; }
  .nx-axis { stroke-width: 1.4; }
  .nx-core { r: 8px; }
  /* rótulo à esquerda do nó, na altura dele, longe da borda da tela */
  .nx-node-label {
    font-family: var(--text);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    text-anchor: end;
    transform: translate(-36px, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}