:root {
  --open-orange: #ff5a00;
  --open-orange-light: #ff9a00;
  --open-red: #e30613;
  --open-yellow: #ffc400;
  --open-black: #090909;
  --open-ink: #111217;
  --open-white: #ffffff;
  --bg: #090909;
  --surface: #151515;
  --surface-2: #202020;
  --border: #34302e;
  --text: #f7f7f7;
  --muted: #b0aaa7;
  --azul: var(--open-orange);
  --verde: var(--open-red);
  --color-p1: var(--open-orange);
  --color-p2: var(--open-yellow);
}

body {
  background:
    radial-gradient(900px 540px at 8% -10%, rgba(255, 90, 0, 0.14), transparent 62%),
    radial-gradient(760px 480px at 96% 8%, rgba(227, 6, 19, 0.12), transparent 64%),
    var(--open-black);
}

header.site {
  background: rgba(8, 8, 8, 0.88);
  border-bottom-color: rgba(255, 90, 0, 0.3);
}

header.site .wrap {
  height: 76px;
}

.brand img {
  width: 156px !important;
  height: 62px !important;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 5px 12px rgba(255, 73, 0, 0.2));
}

.brand span {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--open-orange-light), var(--open-orange) 48%, var(--open-red));
  box-shadow: 0 12px 28px -14px rgba(255, 75, 0, 0.9);
}

.btn-primary:hover {
  box-shadow: 0 16px 36px -14px rgba(255, 75, 0, 1);
}

.hero::before,
.doc-hero::before {
  background:
    radial-gradient(640px 320px at 24% 0%, rgba(255, 90, 0, 0.2), transparent 70%),
    radial-gradient(640px 320px at 76% 8%, rgba(227, 6, 19, 0.18), transparent 70%) !important;
}

.event-logo-wrap {
  width: min(92%, 680px);
  margin: 0 auto 24px;
  padding: 0;
  background: transparent;
}

.event-logo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 20px 32px rgba(0, 0, 0, 0.48))
    drop-shadow(0 8px 20px rgba(255, 74, 0, 0.18));
}

.badge {
  border-color: rgba(255, 90, 0, 0.38);
  background: rgba(255, 90, 0, 0.08);
  color: #ffd1bb;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero h1 .azul,
.doc h2 .step-n,
.doc ol > li::before,
.doc ul > li::before,
.toc a::before {
  color: var(--open-orange) !important;
}

.hero h1 .verde {
  color: var(--open-red) !important;
}

.card:hover,
.showcase,
.split-media img,
figure img {
  border-color: rgba(255, 90, 0, 0.42);
}

.showcase,
.split-media,
figure {
  position: relative;
}

.showcase::after,
.split-media::after,
figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 90, 0, 0.34), rgba(227, 6, 19, 0.3));
  mix-blend-mode: color;
}

.showcase::before,
.split-media::before,
figure::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(6, 6, 6, 0.98));
}

.card .ico {
  background: linear-gradient(145deg, rgba(255, 90, 0, 0.18), rgba(227, 6, 19, 0.1));
  border: 1px solid rgba(255, 90, 0, 0.22);
}

.split-text li::before,
.note {
  color: var(--open-orange);
}

.note {
  border-left-color: var(--open-orange);
}

.doc a:not(.btn) {
  color: #ff8a4c;
  border-bottom-color: rgba(255, 138, 76, 0.35);
}

.doc a:not(.btn):hover,
.toc a:hover {
  color: #ffb083;
  border-bottom-color: #ffb083;
}

.cta-final {
  background:
    linear-gradient(145deg, rgba(255, 90, 0, 0.1), rgba(227, 6, 19, 0.06)),
    var(--surface);
  border-color: rgba(255, 90, 0, 0.3);
}

footer.site {
  border-top-color: rgba(255, 90, 0, 0.24);
}

/* Aplicativo */
#root > main {
  background:
    radial-gradient(1000px 640px at 50% -15%, #27130d 0%, #0b0b0d 53%, #050505 100%) !important;
}

.bg-emerald-500 {
  background-color: var(--open-orange) !important;
}

.text-emerald-400,
.text-blue-400 {
  color: #ff792f !important;
}

.border-emerald-400\/60 {
  border-color: rgba(255, 90, 0, 0.6) !important;
}

.bg-emerald-500\/15 {
  background-color: rgba(255, 90, 0, 0.15) !important;
}

.open-secondary-action {
  padding-inline: 9px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.045em !important;
  white-space: nowrap;
}

.open-queue-color-wrap {
  position: relative;
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.72), rgba(5, 8, 13, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 3px 10px rgba(0, 0, 0, 0.22);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.open-queue-color-wrap::before {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--picker-color) 22%, transparent);
  content: "";
  filter: blur(5px);
  opacity: 0.75;
  pointer-events: none;
}

.open-queue-color {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: var(--picker-color);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--picker-color) 34%, transparent),
    0 2px 7px rgba(0, 0, 0, 0.5);
  appearance: none;
  -webkit-appearance: none;
}

.open-queue-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.open-queue-color::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.open-queue-color::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.open-queue-color-wrap:hover,
.open-queue-color-wrap:focus-within {
  border-color: color-mix(in srgb, var(--picker-color) 62%, white 12%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 2px color-mix(in srgb, var(--picker-color) 14%, transparent),
    0 5px 14px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.open-queue-color:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.open-color-syncing .fixed.inset-0.z-50 {
  visibility: hidden !important;
}

@media (max-width: 760px) {
  header.site .wrap {
    height: 64px;
  }

  .nav {
    top: 64px;
  }

  .brand img {
    width: 120px !important;
    height: 52px !important;
  }

  .brand span {
    display: none;
  }

  .event-logo-wrap {
    width: 100%;
    margin-bottom: 22px;
  }

}