/* Rastro · tokens e componentes de marca (docs: rastro/RASTRO-mestre.md §3). */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

:root {
  --tinta: #1D2BD6; --tinta-viva: #3442F0; --noite: #070C52; --papel: #F3F2EE;
  --grafite: #0A0A0D; --lapis: #8B90A0; --marca: #FFE45C;
  --ok: #17A06B; --aviso: #E8962A; --risco: #E5484D;
  --bg: #F3F2EE; --surface: #FFFFFF; --fg: #0A0A0D; --muted: #55596A; --line: #DCDAD2; --chip: #E7E6F7;
  --accent: var(--tinta);
  --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-ui: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-read: "Source Serif 4", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06082A; --surface: #0E1240; --fg: #ECEBF4; --muted: #A3A7C8; --line: #252A63; --chip: #1A1F5C;
    --accent: #8C95FF; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #06082A; --surface: #0E1240; --fg: #ECEBF4; --muted: #A3A7C8; --line: #252A63; --chip: #1A1F5C;
  --accent: #8C95FF; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--f-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
/* marca-texto: amarelo cheio atrás da palavra, letra em azul-noite (contraste 13:1) */
.hl { background: var(--marca); color: var(--noite) !important; padding: 0 .1em; border-radius: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
.display:has(.hl) { line-height: 1.14 !important; }

.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500; line-height: 1.15; white-space: nowrap; border: 1.5px solid transparent; }
.pill.cheia { background: var(--papel); color: var(--tinta); }
.pill.vazada { border-color: currentColor; }
.pill.marca { background: var(--marca); color: var(--noite); }
.pill.tinta { background: var(--tinta); color: var(--papel); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 15px; border-radius: 999px; padding: 10px 20px; cursor: pointer;
  border: 1.5px solid var(--accent); background: transparent; color: var(--fg); text-decoration: none;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn:hover { background: var(--chip); }
.btn:active { transform: scale(.97); }
.btn.pri { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn.pri:hover { background: var(--tinta-viva); box-shadow: 0 6px 18px rgba(29, 43, 214, .28); }
.btn.marca { background: var(--marca); border-color: var(--marca); color: var(--noite); }
.btn.sm { font-size: 13px; padding: 6px 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* cartão em camadas: versões anteriores à direita */
.camadas { position: relative; padding-right: 24px; }
.camadas > .face { position: relative; z-index: 4; }
.camadas > i { position: absolute; inset: 0 24px 0 0; border-radius: inherit; background: currentColor; transition: transform .6s var(--ease); }
.camadas > i:nth-of-type(1) { transform: translateX(8px) scaleY(.95); opacity: .5; z-index: 3; }
.camadas > i:nth-of-type(2) { transform: translateX(16px) scaleY(.9); opacity: .28; z-index: 2; }
.camadas > i:nth-of-type(3) { transform: translateX(24px) scaleY(.85); opacity: .14; z-index: 1; }

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