/* =============================================
   Ant — base visual do funil
   Valores copiados de antsports-design-system/src/tokens.css.
   Mudou lá, muda aqui.
============================================= */

:root {
  --at-red: #F32735;
  --at-red-hover: #d91c2a;
  --at-red-soft: rgba(243, 39, 53, 0.12);
  --at-bg: #051C2C;
  --at-surface: #00273D;
  --at-blue: #006699;
  --at-ink: #F5F9FC;
  --at-mute: rgba(245, 249, 252, 0.55);
  --at-faint: rgba(245, 249, 252, 0.34);

  --ds-bg-base: #010609;
  --ds-bg-holofote:
    radial-gradient(120% 80% at 12% 8%, #04182a 0%, transparent 55%),
    radial-gradient(120% 90% at 88% 18%, #030f1a 0%, transparent 50%),
    radial-gradient(150% 130% at 50% 108%, #01070d 0%, transparent 60%);
  --ds-glass-bg: rgba(6, 30, 47, 0.3);
  --ds-glass-border: rgba(16, 93, 148, 0.3);
  --ds-field-bg: #051D2E;
  --ds-border: hsl(200 70% 22%);

  --ds-radius: 0.625rem;
  --ds-radius-sm: calc(var(--ds-radius) - 4px);
  --ds-radius-md: calc(var(--ds-radius) - 2px);
  --ds-radius-xl: calc(var(--ds-radius) + 4px);
  --ds-radius-2xl: 1rem;

  --ds-font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  --ds-duration-abertura: 350ms;
  --ds-ease-folha: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ds-bg-base);
  background-image: var(--ds-bg-holofote);
  background-attachment: fixed;
  color: var(--at-ink);
  font-family: var(--ds-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* O azul da marca subindo dos cantos de cima, por cima da vinheta */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 15% -5%, rgba(0, 102, 153, 0.28), transparent 70%),
    radial-gradient(50% 40% at 95% 0%, rgba(0, 102, 153, 0.16), transparent 70%);
}

a { color: inherit; }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Marca ---------- */
.ant-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--at-ink);
}
.ant-brand img { height: 30px; width: auto; display: block; }
.ant-brand-name { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1; }
.ant-brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-mute);
  margin-top: 3px;
}

/* ---------- Vidro ---------- */
.glass {
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- Botão principal ---------- */
.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: var(--ds-radius);
  background: var(--at-red);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(243, 39, 53, 0.6);
  transition: background 0.2s, transform 0.2s var(--ds-ease-folha), box-shadow 0.2s;
}
.btn-red:hover { background: var(--at-red-hover); transform: translateY(-1px); }
.btn-red:active { transform: translateY(0); }
.btn-red:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-red:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--at-ink); outline-offset: 3px; }
.btn-block { width: 100%; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass-bg);
  color: var(--at-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s;
}
.btn-ghost:hover { border-color: var(--at-blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}