/* ===========================================================================
   Central Weltrix — base visual (navy + dourado, identidade do site)
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --navy: #081428;
  --navy-2: #0b1a35;
  --surface: #0f1d3d;
  --surface-2: #13224a;
  --gold: #c9a24b;
  --gold-hi: #e3c67a;
  --ink: #eef1f8;
  --muted: #93a1bf;
  --line: rgba(201, 162, 75, 0.2);
  --line-soft: rgba(238, 241, 248, 0.09);
  --ok: #4ec98a;
  --warn: #e8b84b;
  --sans: 'Hanken Grotesk', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --disp: 'Bricolage Grotesque', var(--sans);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 15px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  min-height: 100dvh;
  background:
    radial-gradient(78% 52% at 12% -6%, rgba(201, 162, 75, 0.13), transparent 58%),
    radial-gradient(66% 50% at 98% 2%, rgba(30, 74, 158, 0.22), transparent 60%),
    var(--navy);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(238, 241, 248, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 241, 248, 0.028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 54px) clamp(18px, 4vw, 28px) 72px;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- monograma / cabeçalho ---------- */
/* a marca completa, sem máscara: nada de seta ou arco aparado */
.mark {
  height: 72px; width: auto; flex: none;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 b { color: var(--gold-hi); font-weight: 800; }

.sub { color: var(--muted); font-size: 14px; margin-top: 7px; }

.lbl {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---------- botões ---------- */
.btn {
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
  font-weight: 650;
  color: var(--navy);
  background: linear-gradient(150deg, var(--gold-hi), var(--gold));
  border: 0;
  border-radius: 11px;
  padding: 11px 18px;
  cursor: pointer;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  color: var(--ink);
  background: rgba(238, 241, 248, 0.06);
  border: 1px solid var(--line-soft);
  font-weight: 600;
}
.btn.ghost:hover { border-color: var(--line); background: rgba(201, 162, 75, 0.08); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

input, select, textarea { font: inherit; color: var(--ink); }

.campo {
  width: 100%;
  background: rgba(4, 10, 22, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.campo:hover { border-color: var(--line); }
.campo:focus { outline: none; border-color: var(--gold); background: rgba(4, 10, 22, 0.8); }

/* ---------- tela de senha ---------- */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.gate-card {
  width: min(400px, 100%);
  background: linear-gradient(180deg, var(--surface), var(--navy-2));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  text-align: center;
}
.gate-card .mark { height: 118px; margin: 0 auto 14px; }
.gate-card h2 { font-family: var(--disp); font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.gate-card p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.gate-card form { margin-top: 20px; display: grid; gap: 10px; }
.erro { color: #ff9b9b; font-size: 13px; min-height: 18px; }

.oculto { display: none !important; }

/* ---------- rodapé ---------- */
footer {
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  align-items: center;
}
footer b { color: var(--gold); font-weight: 500; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}