/* Base compartilhada pelo site e pelo ADM: cores da marca, tipografia, botões e campos. */
:root {
  --ink: #0A0906;
  --ink-2: #14130E;
  --ink-3: #1D1B14;
  --fg: #FFFFFF;
  --mute: rgba(255, 255, 255, .74);
  --dim: rgba(255, 255, 255, .56);
  --line: rgba(255, 255, 255, .12);
  --sun: #FFE600;
  --sun-soft: rgba(255, 230, 0, .14);
  --on-sun: #0A0906;
  --danger: #FF7A59;

  --f-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-up: "Anton", Impact, "Arial Narrow", sans-serif;

  --radius: 16px;
  --gutter: 16px;
  --ease: cubic-bezier(.215, .61, .355, 1);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.text-sun { color: var(--sun); }

/* logo */
.mark { display: inline-flex; align-items: center; text-decoration: none; }
.mark-logo { height: 40px; width: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px var(--sun-soft); }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 800; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sun { background: var(--sun); color: var(--on-sun); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--fg); }
.btn-ghost:hover { border-color: var(--sun); color: var(--sun); }
.btn-danger { border-color: rgba(255, 122, 89, .4); background: transparent; color: var(--danger); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 13px; }

/* campos */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field > span { font-size: 13px; font-weight: 700; color: var(--mute); }
.input {
  width: 100%; min-height: 50px; padding: 12px 16px;
  background: var(--ink); border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color .2s;
}
.input:focus { outline: none; border-color: var(--sun); }
textarea.input { min-height: 96px; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }