/* ==========================================================================
   BASE.CSS — reset, elementos raiz, utilitários, acessibilidade (Parte E.1)
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  padding-bottom:58px; /* espaço para a barra de CTA fixa em mobile */
}
@media(min-width:1024px){ body{ padding-bottom:0; } }

/* Craftsmanship C02 — "heading balance": a última linha de um título nunca
   deve ficar com uma palavra órfã sozinha; text-wrap:balance distribui as
   palavras para que a forma do bloco pareça composta, não acidental.
   Suporte parcial (Chromium/Safari recentes) — degrada em segurança para
   o comportamento normal onde não há suporte, sem quebrar nada. */
h1,h2,h3{ font-family:var(--font-display); color:var(--color-primary); margin:0; text-wrap:balance; }
h1{ font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--fw-bold); letter-spacing:var(--tracking-display); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-heading); font-weight:var(--fw-bold); letter-spacing:var(--tracking-heading); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-heading); font-weight:var(--fw-semibold); }
/* text-wrap:pretty evita órfãs em parágrafos de corpo — o mesmo raciocínio
   editorial do balance, aplicado a blocos de texto mais longos. */
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-4); }
@media(min-width:768px){ .container{ padding:0 var(--space-8); } }

section{ padding:var(--space-24) 0; }
@media(min-width:1024px){ section{ padding:var(--space-32) 0; } }

.kicker{
  font-family:var(--font-body); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-kicker); text-transform:uppercase;
  font-size:var(--fs-caption);
  /* Correcção Parte D (Elevação) / E.1: #C9AB00 sobre branco só dá 2.26:1 —
     falha AA. Em fundo claro o kicker usa --color-primary (15.18:1).
     Em fundo navy (.hero/.duat), sections.css sobrepõe para --color-accent,
     que sobre navy tem contraste elevado — ver auditoria de contraste. */
  color:var(--color-primary);
  display:block; margin-bottom:var(--space-2);
}

/* ---------- Skip link (Parte E.1 — navegação por teclado) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--color-primary); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--radius-btn) 0; font-weight:var(--fw-semibold);
}
.skip-link:focus{ left:0; }

/* ---------- Foco visível global (Parte E.1 — nunca remover sem alternativa) ----------
   Craftsmanship C08: o anel de foco ganha um halo suave por trás do
   contorno — o mesmo vocabulário de luz do resto do site — para que
   navegar por teclado pareça parte do design, não uma sobreposição do
   browser esquecida por cima dele. */
:focus-visible{
  outline:2px solid var(--color-accent); outline-offset:2px;
  box-shadow:0 0 0 5px rgba(249,210,8,.18);
  transition:box-shadow var(--duration-fast) var(--ease-out);
}
.on-navy :focus-visible{ outline-color:var(--color-accent); box-shadow:0 0 0 5px rgba(249,210,8,.28); }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------- Divisor de secção — barra vertical (motivo do wordmark) ----------
   Craftsmanship C01: o espaço entre o título e o parágrafo-ponte que se
   segue sobe de --space-6 para --space-8 — o suficiente para o título
   "respirar" sem soltar visualmente o bloco (regra: nunca mais que o
   dobro do espaço entre parágrafos internos). */
.section-head{ display:flex; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-8); }
.section-head-text h2{ margin:0; }

/* ---------- Ponte narrativa (Parte D — Refinamento Foco 2: nenhuma secção
   fica reduzida a "título + texto + cards"; cada uma herda e empurra a
   tensão/resolução definida na Fase 4 da Direcção Criativa). ---------- */
.section-lead{
  font-family:var(--font-display); font-weight:var(--fw-medium); font-style:normal;
  font-size:clamp(1.05rem, 1rem + .4vw, 1.35rem); line-height:1.45; color:var(--color-primary);
  max-width:56ch; margin:0 0 var(--space-8);
}
.on-navy .section-lead{ color:rgba(255,255,255,.92); }
.eyebrow-divider{
  display:inline-block; width:3px; align-self:stretch; min-height:40px;
  background:var(--color-primary); transform-origin:top; transform:scaleY(0);
  transition:transform var(--duration-slow) var(--ease-out);
}
.section-head.is-visible .eyebrow-divider{ transform:scaleY(1); }

/* ---------- Reveal on scroll — sempre com alternativa estática (Parte E.1) ---------- */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--duration-slow) var(--ease-standard),
             transform var(--duration-slow) var(--ease-standard);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .eyebrow-divider{ transform:scaleY(1) !important; transition:none !important; }
}

/* ---------- Placeholder de activo em falta (Apêndice 3) ---------- */
.asset-flag{
  display:inline-block; font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.04em;
  text-transform:uppercase; color:#8a4b00; background:#fff4d9; border:1px solid #f0d38a;
  padding:2px 8px; border-radius:5px; margin-left:8px;
}