/* RAS Future — tokens e base compartilhada (site, login e painel) */
:root {
  --tinta: #0a0c0b;
  --tinta-2: #101312;
  --tinta-3: #171b19;
  --tinta-4: #1f2422;
  --linha: rgb(232 240 220 / 0.08);
  --linha-forte: rgb(232 240 220 / 0.16);
  --papel: #eceee6;
  --papel-2: #c9cdc2;
  --cinza: #8d958c;
  --cal: #c8f542;
  --cal-tinta: #1b2206;
  --cal-suave: rgb(200 245 66 / 0.12);
  --brasa: #ff7a45;
  --brasa-suave: rgb(255 122 69 / 0.13);
  --gelo: #8fd3ff;
  --gelo-suave: rgb(143 211 255 / 0.12);
  --verde: #6fdc9b;
  --verde-suave: rgb(111 220 155 / 0.12);

  --f-display: "Unbounded", "Hanken Grotesk", sans-serif;
  --f-texto: "Hanken Grotesk", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --raio: 14px;
  --raio-g: 22px;
  --sai: cubic-bezier(0.16, 1, 0.3, 1);
  --z-fundo: 0; --z-conteudo: 1; --z-nav: 20; --z-folha: 30; --z-modal: 40; --z-aviso: 50; --z-cursor: 60;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font: 400 16px/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--cal); color: var(--cal-tinta); }
:focus-visible { outline: 2px solid var(--cal); outline-offset: 3px; border-radius: 6px; }

.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Grão de filme por cima de tudo: dá textura e tira o aspecto "plástico" */
.grao::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-aviso); opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Botões */
.btn {
  --bg: var(--tinta-3); --fg: var(--papel); --bd: var(--linha-forte);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 46px; padding: 0 1.25em; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform 0.18s var(--sai), border-color 0.18s, background-color 0.18s;
}
.btn:hover { border-color: var(--papel-2); }
.btn:active { transform: scale(0.97); }
.btn .i { transition: transform 0.25s var(--sai); }
.btn:hover .i:last-child { transform: translateX(3px); }
.btn-cal { --bg: var(--cal); --fg: var(--cal-tinta); --bd: var(--cal); }
.btn-cal:hover { border-color: var(--papel); }
.btn-cal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--papel);
  transform: translateY(101%); transition: transform 0.35s var(--sai);
}
.btn-cal:hover::before { transform: translateY(0); }
.btn-fantasma { --bg: transparent; }
.btn-p { min-height: 38px; padding: 0 0.95em; font-size: 0.875rem; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza);
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cal); }

.marca { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 1rem/1 var(--f-display); letter-spacing: -0.01em; }
.marca img { width: 30px; height: 30px; border-radius: 8px; }

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