/* Desafio Touro Mecânico FAJ — identidade visual */
@font-face {
  font-family: 'RodeoNight';
  src: url('/assets/fonts/RodeoNight-Rough.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JUST Sans';
  src: url('/assets/fonts/JUSTSans-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JUST Sans';
  src: url('/assets/fonts/JUSTSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JUST Sans';
  src: url('/assets/fonts/JUSTSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JUST Sans';
  src: url('/assets/fonts/JUSTSans-ExBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bg-0: #130b02;
  --bg-1: #211910;
  --bg-2: #2e2418;
  --cream: #fff9f3;
  --cream-dim: #cfc4b6;
  --red: #f90825;
  --red-dark: #c00018;
  --ok: #3ddc74;
  --line: rgba(255, 249, 243, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: radial-gradient(ellipse at 50% -10%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: 'JUST Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: 'RodeoNight', 'JUST Sans', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .95;
}

.btn {
  display: inline-block;
  font-family: 'JUST Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--red);
  color: var(--cream);
  border: none;
  border-radius: 10px;
  padding: 16px 34px;
  font-size: 17px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-ghost {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--cream);
}
.btn-ghost:hover { background: rgba(255, 249, 243, .07); }

.card {
  background: rgba(255, 249, 243, .045);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}

input[type=text], input[type=email], input[type=tel], input[type=password], select {
  width: 100%;
  background: rgba(19, 11, 2, .6);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--cream);
  font-family: 'JUST Sans', sans-serif;
  font-size: 17px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--red); }
::placeholder { color: rgba(207, 196, 182, .55); }

.mono { font-variant-numeric: tabular-nums; }