/* ════════════════════════════════════════════════════════════════════
   BASE — reset, tipografia global, helpers transversais
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--champagne); color: var(--ink-strong); }

/* ── Animações ── */
@keyframes kfcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kfcUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* O wrapper de cada página faz fade-in na navegação */
.view { animation: kfcFade .4s ease; }

/* ── Tipografia · helpers ── */
.serif { font-family: var(--serif); }

/* Sobrescritas de etiqueta (eyebrow) acima dos títulos */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--line::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.eyebrow--hero { font-size: 10.5px; letter-spacing: 0.25em; gap: 12px; }
.eyebrow--hero.eyebrow--line::before { width: 30px; }

/* ── Títulos display ── */
.display-hero {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.display-page {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.display-hero em, .display-page em { font-style: italic; color: var(--champagne); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--navy-soft);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.heading-md {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 400;
  color: var(--navy-soft);
  line-height: 1.25;
}

/* ── Utilitários de cor de fundo de secção ── */
.bg-navy  { background: var(--navy); }
.bg-panel { background: var(--panel); border-top: 1px solid var(--panel-border); }
.bg-white { background: var(--white); }

/* Linha dourada decorativa no topo das bandas escuras */
.goldline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}
.goldline--soft { opacity: 0.4; }