/* =============================================================================
   THEME — tokens de marca da Pórtico Capital.
   Verde evergreen + ouro envelhecido, dark-first, acento sussurrado.
   Carregado DEPOIS de styles.css; sobrescreve os tokens de :root.
   ========================================================================== */

:root {
  /* ---------- superfícies ---------- */
  --ground: #081e19; /* fundo base — evergreen profundo */
  --ground-deep: #051410; /* footer + borda do gradiente */
  --surface: #0f2a24; /* painéis */
  --surface-raised: #143630; /* skip-link */
  --border: #1d453c; /* molduras */
  --border-strong: #2a5a4e; /* inputs, hover */

  /* ---------- texto ---------- */
  --text-primary: #f6f1e8; /* títulos — pergaminho */
  --text-secondary: #c9ccc3; /* corpo */
  --text-muted: #8c9a92; /* labels e notas */

  /* ---------- acento (os dois dourados oficiais do logo) ---------- */
  --accent: #c2a56b; /* dourado 2 — o tom do lockup do header */
  --accent-hover: #d1b178; /* dourado 1 — vira o estado de hover */
  --accent-pressed: #9e8552;
  --hairline-accent: rgba(194, 165, 107, 0.24);
  --focus: #c2a56b;

  /* ---------- hairlines / overlays ---------- */
  --emblem-stroke: rgba(246, 241, 232, 0.92);
  --hairline: rgba(246, 241, 232, 0.1);
  --hairline-strong: rgba(246, 241, 232, 0.18);
  --scrim: rgba(5, 20, 16, 0.72);
}

/* Centro do gradiente radial do fundo (evergreen vivo) */
body {
  background-image: radial-gradient(120% 80% at 50% 30%, #123a34 0%, var(--ground) 46%, var(--ground-deep) 100%);
}

/* Seleção de texto (accent 22%) */
::selection {
  background: rgba(194, 165, 107, 0.22);
  color: var(--text-primary);
}

/* Lockup horizontal (5.8:1): presente sem dominar */
.brand-logo {
  height: clamp(24px, 2.6vw, 32px);
}

/* O header mantém a estatura original — o equilíbrio vem do respiro
   interno, não do encolhimento da barra */
.header-inner {
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
}

/* Navegação proporcional ao lockup contido */
.nav-menu a {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

/* A espinha central usa left:50% — sem o translate, a BORDA (e não o eixo)
   da linha cai no centro, deixando-a meio pixel à direita de tudo. */
.bg-spine {
  transform: translateX(-50%);
}

/* Os três compromissos lado a lado no desktop (colapsa a 1 coluna no mobile,
   pela media query original da grade) */
@media (min-width: 861px) {
  .paths-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .path-card {
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
  }
}

/* Filete dourado do hero: +1px pra cravar no mesmo eixo da espinha */
.hero-drop {
  transform: translateX(1px);
}

/* Emblema com a caixa recortada na arte (viewBox justo): a largura abaixo é a
   da LOGO em si — ~125px de altura no desktop, o peso que o slot foi
   desenhado pra carregar. */
.emblem {
  width: clamp(64px, 7.6vw, 88px);
}

/* Emblema do hero: o símbolo emerge da profundidade — scale sutil (95%→100%)
   + fade, ancorado no próprio centro. A marca atravessa o pórtico em direção
   a quem olha. */
.emblem-mark {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes markRise {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .emblem.play .emblem-mark {
    animation: markRise 1.2s var(--ease) 1.5s both;
  }
}

/* Borda de repouso do botão primário (text-primary 42%) */
.btn-primary {
  border: 1px solid rgba(246, 241, 232, 0.42);
}

/* Tint sutil dos cards emoldurados */
.framed {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent);
}