/* ===========================================================
   ALVA GESTÃO FINANCEIRA — Design tokens & base styles
   Identidade: grafite + luz dourada (a marca "Alva" remete a
   alvorada/clareza — o motivo de luz é o mesmo da assinatura,
   usado com moderação: um brilho, nunca um efeito).
   Tipografia: Playfair Display (títulos) + Inter (texto).
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ===========================================================
     Paleta oficial — Manual de Identidade Visual (set/2026)
     Só 3 cores. Tudo o que não é uma delas é a mesma cor em outra
     opacidade — nunca um tom novo. Ver §"Cor" do manual:
       Grafite  #40464D — texto, símbolo monocromático
       Alvorada #D9B27F — núcleo do símbolo, fios e detalhes
       Papel    #FBF9F6 — fundo padrão
     Contraste (do próprio manual): Alvorada sobre Papel = 1,88:1
     (não usar em texto/ícone sobre fundo claro — só símbolo e fios).
     Alvorada sobre Grafite = 4,83:1 (ok para texto/ícone nesse par,
     nas duas direções). Grafite sobre Papel = 9,08:1.
     =========================================================== */
  --graphite: #40464d;     /* Grafite oficial */
  --graphite-2: #40464d;   /* mesma cor — sem um segundo grafite no manual */
  --gold: #d9b27f;         /* Alvorada oficial */
  --cream: #fbf9f6;        /* Papel oficial */
  --paper: #fbf9f6;        /* cartões usam o mesmo Papel — diferenciados por borda, não por cor */

  --ink: var(--graphite);              /* texto principal = Grafite */
  --muted: rgba(64,70,77,.94);         /* Grafite a 94% sobre Papel — subido de 80% (5,2:1) por legibilidade, ⇒ ~7,7:1 */
  --line: rgba(64,70,77,.14);          /* Grafite a 14% — borda sutil */
  --paper-2: rgba(217,178,127,.08);    /* Alvorada a 8% — véu quente p/ alternar seção, não é texto */
  --on-dark-muted: rgba(251,249,246,.7); /* Papel a 70% sobre Grafite ⇒ 5.4:1 */

  /* aliases mantidos por compatibilidade com o restante do arquivo
     (sempre resolvem para uma das 3 cores oficiais, nunca um tom novo) */
  --gold-1: var(--gold);
  --gold-2: var(--gold);
  --gold-3: var(--gold);
  --gold-ink: var(--graphite);

  /* --- feedback (sem cor própria no manual: usa-se Grafite + forma do ícone) --- */
  --ok: var(--graphite);
  --warn: var(--graphite);

  /* --- tipografia --- */
  /* O manual reserva Cormorant Garamond como única família da marca,
     com Medium (500) só no nome "ALVA" e Regular (400) em títulos e
     texto corrido. Na tela, Regular (400) nesta serifada fica com
     traço muito fino para leitura de parágrafo — por isso o corpo do
     texto do site usa Medium (500), um desvio deliberado do manual
     (a pedido do cliente), igual ao já feito nos títulos e no botão. */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body-weight: 500;

  /* --- espaçamento (escala espaçosa, site institucional) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* --- forma --- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --container: 1180px;

  /* Altura do cabeçalho e da logo em um lugar só: o menu mobile é
     position:fixed e precisa começar exatamente onde o cabeçalho termina.
     Antes isso era um "64px" cravado na regra do menu, que já não batia com
     a altura real (72px) e quebraria a cada mudança no tamanho da logo. */
  --logo-h: 48px;
  --header-h: 80px;

  --shadow-card: 0 1px 2px rgba(43,46,51,.04), 0 12px 32px -16px rgba(43,46,51,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--body-weight);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* O manual reserva Medium (500) só para o nome "ALVA" na assinatura
   (uma imagem, não é setada aqui) e pede Regular (400) em títulos.
   A pedido do usuário, os títulos do site usam Semibold (600) — uma
   opção deliberada de destoar do manual nesse ponto, para mais peso
   visual. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--graphite);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  font-weight: 600;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.8rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); }
h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); }
p { margin: 0 0 var(--space-2); color: var(--ink); }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }

/* "Regular espaçado — rótulos e legendas": mesma família, sem caixa
   alta forçada por peso extra — o traço fino já é a marca. Nunca em
   Alvorada sobre fundo claro (1,88:1 no manual); o dourado fica só no
   traço decorativo antes do texto. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-2), transparent);
}

::selection { background: var(--gold-1); color: var(--graphite-2); }

/* focus visível — acessibilidade prioridade 1. Grafite, não Alvorada:
   o próprio manual mede o dourado sobre Papel em 1,88:1 — invisível
   como indicador de foco. Grafite sobre Papel é 9,08:1. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--graphite);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--graphite);
  color: #fff;
  padding: 12px 18px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
@media (max-width: 640px) {
  /* margem lateral no celular: era var(--space-2) (16px) e o texto encostava
     na borda. 24px dá respiro sem comer largura útil de leitura. */
  .container { padding: 0 var(--space-3); }
}

section { position: relative; }
.section { padding: var(--space-7) 0; }
.section--tight { padding: var(--space-6) 0; }
.section--alt { background: var(--paper-2); }
.section--dark {
  background: var(--graphite);
  color: var(--cream);
}
.section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .lede { color: var(--on-dark-muted); }

@media (max-width: 640px) {
  .section { padding: var(--space-5) 0; }
  .section--tight { padding: var(--space-4) 0; }
}

/* ===== motivo de luz — "alvorada" =====
   Reaproveita a mesma ideia da assinatura: uma trama de pontos em
   degradê dourado, sempre no topo/fundo de uma seção, nunca como
   fundo inteiro. Gerado em CSS puro (sem imagem extra). */
.glow-dome {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 160vw;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(217,178,127,.55), rgba(217,178,127,0) 70%);
  filter: blur(2px);
  opacity: .8;
  z-index: 0;
}

/* ===== "alvorada nascendo" — animação da luz, só na home =====
   Três camadas de luz com períodos primos (13s, 19s, 23s): como não são
   múltiplos entre si, o conjunto leva ~47min para repetir o mesmo quadro.
   É isso que dá a sensação de luz viva em vez de um pulso piscando.
   Só transform/opacity (compositor: sem reflow, sem custo de layout).

   Fica restrita a `.hero` de propósito: nas outras páginas o mesmo
   elemento leva `style="opacity:.5"` inline, e animação em CSS ganha de
   estilo inline enquanto roda — animar lá clarearia aqueles topos além
   do pretendido.

   O @media (prefers-reduced-motion: reduce) no topo do arquivo já zera a
   duração de toda animação do site; quem pede menos movimento no sistema
   vê a luz parada, idêntica à versão estática. */
.hero .glow-dome {
  animation: alva-glow-breathe 13s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero .glow-dome::before,
.hero .glow-dome::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* camada de deriva: desloca devagar para os lados, como a luz abrindo */
.hero .glow-dome::before {
  background: radial-gradient(closest-side, rgba(217,178,127,.34), rgba(217,178,127,0) 70%);
  animation: alva-glow-drift 19s ease-in-out infinite;
}
/* núcleo quente, menor e mais lento, na direção oposta */
.hero .glow-dome::after {
  background: radial-gradient(closest-side at 50% 45%, rgba(217,178,127,.28), rgba(217,178,127,0) 55%);
  animation: alva-glow-core 23s ease-in-out infinite;
}

@keyframes alva-glow-breathe {
  0%, 100% { transform: translateX(-50%) scale(.95); opacity: .58; }
  50%      { transform: translateX(-50%) scale(1.07); opacity: .92; }
}
@keyframes alva-glow-drift {
  0%, 100% { transform: translateX(-38px) scale(1);    opacity: .45; }
  50%      { transform: translateX(38px)  scale(1.08); opacity: .8; }
}
@keyframes alva-glow-core {
  0%, 100% { transform: translateX(26px) scale(1.04); opacity: .75; }
  50%      { transform: translateX(-26px) scale(.9);  opacity: .4; }
}
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(217,178,127,.4) 1px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 75%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 75%);
  opacity: .55;
}

hr.divider {
  border: none;
  height: 1px;
  margin: var(--space-6) 0;
  background: linear-gradient(90deg, transparent, var(--gold-2) 50%, transparent);
  opacity: .5;
}

/* ===== header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* fundo opaco (não semi-transparente com blur): backdrop-filter/filter em um
     ancestral cria um novo containing block para descendentes position:fixed —
     isso prendia o menu mobile dentro da altura do header. Ver .nav abaixo. */
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* Sem `padding` aqui. Este elemento também é `.container`, e um shorthand
     como `padding: 14px 0` zerava o padding lateral do container — era isso
     que deixava a logo colada na borda da tela no celular. A altura vem de
     min-height, que ainda mantém a altura do cabeçalho previsível. */
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--graphite);
}
.brand img { height: var(--logo-h); width: auto; }
.brand span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav__links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--muted); /* estado padrão mais claro, para a página atual se destacar de verdade */
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--graphite);
  border-color: var(--gold);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  :root { --logo-h: 44px; --header-h: 72px; }

  .nav-toggle { display: inline-flex; }

  /* Logo centralizada no celular: o menu vira off-canvas (fora do fluxo),
     então sobra só a logo no flex — centralizar é `justify-content: center`.
     O botão do menu sai do fluxo e vai para a direita, alinhado à mesma
     margem lateral do container. */
  .site-header__bar { justify-content: center; position: relative; }
  .nav-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: var(--space-2); width: 100%; justify-content: center; }
}

/* ===== botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  min-height: 44px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .01em;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Botão primário: Grafite cheio + texto Papel — o par de maior
   contraste possível com as cores da marca (9,08:1). O dourado
   continua reservado ao símbolo, aos fios/detalhes e a bordas —
   não ao preenchimento do botão. */
.btn--primary {
  background: var(--graphite);
  color: var(--cream);
  box-shadow: 0 10px 24px -14px rgba(64,70,77,.45);
}
.btn--primary:hover { filter: brightness(1.15); }

/* .btn--on-dark aparece só dentro de seções que já são Grafite (a
   faixa de CTA escura). Um botão Grafite ali ficaria invisível —
   por isso inverte: fundo Papel + texto Grafite, o mesmo par de
   9,08:1, só com as cores trocadas de lugar. */
.btn--on-dark {
  background: var(--cream);
  color: var(--graphite);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.35);
}
.btn--on-dark:hover { filter: brightness(.96); }

.btn--ghost {
  background: transparent;
  color: var(--graphite);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--graphite); background: var(--paper); }

/* ===== hero ===== */
.hero {
  padding: var(--space-8) 0 var(--space-7);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero__note { margin-top: var(--space-3); font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero__note svg { flex: none; color: var(--graphite); }

/* ===== grids & cards ===== */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,178,127,.16); /* véu de Alvorada — decorativo, não texto */
  color: var(--graphite); /* o ícone é grafite: dourado sobre Papel não passa 3:1 */
  margin-bottom: var(--space-2);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

.pillar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.pillar__icon {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,249,246,.06);
  border: 1px solid rgba(217,178,127,.4);
  color: var(--gold); /* sobre Grafite, Alvorada mede 4,83:1 — ok aqui */
}
.pillar__icon svg { width: 24px; height: 24px; }

.step {
  position: relative;
  padding-left: 56px;
}
.step__num {
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--gold);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.steps { display: grid; gap: var(--space-4); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .85rem;
  color: var(--muted);
}

.city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.city-list li {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .92rem;
  color: var(--graphite);
}

/* ===== planos ===== */
.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.plan--featured {
  border-color: var(--gold); /* fio dourado — uso decorativo, endossado pelo manual */
  box-shadow: 0 20px 48px -24px rgba(217,178,127,.5);
  position: relative;
}
.plan__badge {
  position: absolute;
  top: -14px; left: var(--space-4);
  background: var(--gold);
  color: var(--graphite);
  font-size: .85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}
.plan__list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.plan__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--ink);
}
.plan__list svg { flex: none; width: 18px; height: 18px; color: var(--ok); margin-top: 3px; }
.plan__price-note {
  font-size: .88rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: var(--space-2);
}

/* ===== regras / confiança ===== */
.rule {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.rule:last-child { border-bottom: none; }
.rule__icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  color: var(--graphite);
}
.rule__icon svg { width: 20px; height: 20px; }

/* ===== faixa de citação ===== */
.quote-band {
  text-align: center;
  padding: var(--space-6) 0;
}
.quote-band blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--graphite);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.3;
}
.quote-band cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: .9rem;
  color: var(--muted);
}

/* ===== CTA final ===== */
.cta-band {
  border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5);
  background: var(--graphite);
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(217,178,127,.35), transparent 70%);
  pointer-events: none;
}
.cta-band h2 { color: var(--cream); margin-bottom: 6px; }
.cta-band p { color: var(--on-dark-muted); margin: 0; max-width: 46ch; }

/* ===== formulário ===== */
.form-grid { display: grid; gap: var(--space-2); }
.form-row { display: grid; gap: 6px; }
.form-row--2 { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 640px) { .form-row--2 { grid-template-columns: 1fr; } }
label { font-size: .9rem; font-weight: 600; color: var(--graphite); }
input, textarea, select {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--graphite); }
.form-hint { font-size: .82rem; color: var(--muted); margin-top: -4px; }
.required { color: var(--graphite); font-weight: 700; }

.contact-card {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.contact-card:last-child { border-bottom: none; }
.contact-card__icon {
  flex: none; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--graphite);
}
.contact-card__icon svg { width: 20px; height: 20px; }

.notice {
  border: 1px dashed var(--line);
  background: var(--paper-2);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  font-size: .92rem;
  color: var(--muted);
}
.notice strong { color: var(--graphite); }

/* ===== footer ===== */
.site-footer {
  background: var(--graphite);
  color: var(--on-dark-muted);
  padding: var(--space-6) 0 var(--space-4);
}
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(251,249,246,.14);
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}
.footer-grid h4 { color: var(--cream); font-family: var(--font-serif); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-2); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .95rem; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.footer-brand img { height: 30px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  font-size: .85rem;
  color: var(--on-dark-muted);
}

/* ===== reveal on scroll (respeita prefers-reduced-motion) ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== utilitários ===== */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-content { max-width: 62ch; }
.mt-0 { margin-top: 0; }
.stack { display: grid; gap: var(--space-2); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }

.page-hero {
  padding: var(--space-6) 0 var(--space-5);
}
.page-hero .eyebrow { margin-bottom: var(--space-2); }

.breadcrumb {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.breadcrumb a { text-decoration: none; border-bottom: 1px solid var(--line); }