/* Royal Black — tokens e componentes compartilhados (landing + páginas de corrida) */
:root {
  --black-000: #000000;
  --royal-black: #0A0A0A;
  --black-100: #121212;
  --black-300: #262626;
  --selected: #1A1A1A;
  --ivory-500: #8C877E;
  --ivory-300: #BDB8AE;
  --ivory-100: #F5F3EE;
  --gold: #C9A55C;
  --gold-light: #F2DFA7;
  --silver: #A7ADB4;
  --pearl: #E4E1DA;
  --error: #E8937F;
  --placeholder: #6E6A63;
  --metal: linear-gradient(115deg, #8C6B32 0%, #C9A55C 28%, #F2DFA7 50%, #C9A55C 72%, #8C6B32 100%);
  --display: 'Familjen Grotesk', system-ui, sans-serif;
  --text: Manrope, system-ui, sans-serif;
}

html { scroll-behavior: smooth; background: var(--royal-black); }
body { margin: 0; background: var(--royal-black); color: var(--ivory-100); font-family: var(--text); -webkit-font-smoothing: antialiased; color-scheme: dark; }
* { box-sizing: border-box; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
::-webkit-scrollbar { height: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; background: rgba(10,10,10,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--black-300); }
.site-header .in { max-width: 1180px; margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 24px; }
.logo { display: block; width: 132px; height: 34px; flex-shrink: 0; }
.logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.nav { display: none; gap: 28px; margin-left: 12px; }
.nav a { font: 600 12px var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-300); }
.nav a:hover { color: var(--ivory-100); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-phone { display: flex; align-items: center; gap: 8px; color: var(--ivory-100); font: 600 14px var(--text); min-height: 44px; }
.header-phone span { display: none; }
.btn-outline { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--gold); border-radius: 2px; background: transparent; color: var(--gold); font: 700 12px var(--text); letter-spacing: .18em; cursor: pointer; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .header-phone span { display: inline; }
}

/* ---------- tipografia ---------- */
.kicker { font: 700 11px var(--text); letter-spacing: .28em; color: var(--gold); text-transform: uppercase; }
.h2 { margin: 0; font: 600 clamp(30px, 4.4vw, 48px)/1.06 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.label { font: 700 11px var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-500); }
.p { margin: 0; font: 400 15px/1.6 var(--text); color: var(--ivory-300); }
.err { font: 500 13px var(--text); color: var(--error); }

/* ---------- formulários ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.input { width: 100%; height: 48px; padding: 0 14px; background: var(--royal-black); border: 1px solid var(--black-300); border-radius: 2px; color: var(--ivory-100); font: 500 16px var(--text); outline: none; }
.input:focus { border-color: var(--gold); }
.input.is-err { border-color: var(--error); }
textarea.input { height: auto; padding: 12px 14px; line-height: 1.4; resize: vertical; }
input[type=date].input, input[type=time].input { padding: 0 12px; font-size: 16px; }
.btn-gold { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 20px; border: 0; border-radius: 2px; background: var(--metal); color: var(--royal-black); font: 700 13px var(--text); letter-spacing: .18em; cursor: pointer; text-transform: uppercase; }
.btn-gold:hover { color: var(--royal-black); filter: brightness(1.05); }
.btn-gold:disabled { opacity: .6; cursor: default; }
.btn-ghost { height: 54px; padding: 0 18px; background: transparent; border: 1px solid var(--black-300); border-radius: 2px; color: var(--ivory-300); font: 700 12px var(--text); letter-spacing: .18em; cursor: pointer; }
.btn-ghost:hover { border-color: var(--ivory-500); }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--gold); font: 600 12px var(--text); cursor: pointer; }
.stepper { display: flex; align-items: center; border: 1px solid var(--black-300); border-radius: 2px; background: var(--royal-black); }
.stepper button { width: 44px; height: 44px; background: none; border: 0; color: var(--ivory-100); font: 500 20px var(--text); cursor: pointer; }
.stepper span { width: 36px; text-align: center; font: 600 16px var(--text); }

/* ---------- linhas de resumo ---------- */
.summary { display: flex; flex-direction: column; border-top: 1px solid var(--black-300); }
.summary .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--black-300); }
.summary .k { font: 700 10px var(--text); letter-spacing: .2em; color: var(--ivory-500); padding-top: 3px; }
.summary .v { font: 500 14px/1.45 var(--text); color: var(--ivory-100); overflow-wrap: anywhere; }

.check-circle { width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }