/* ============================================================
   TREINANDO ROBÔ — sistema visual
   Tokens harmonizados com ai.hub.xyz (paper + verde neon)
   Marca própria: base creme + estética "ficha de operação"
   ============================================================ */

:root{
  /* superfícies */
  --paper:#ffffff;
  --paper-warm:#fafafa;
  --paper-cool:#f4f4f5;
  --shell:#f5f3ec;              /* base creme — assinatura da Hub */
  --shell-deep:#ece9de;

  /* tinta */
  --ink:#141414;
  --ink-soft:#2a2a2a;
  --ink-mute:#5b5b63;
  --ink-fade:#9a9aa3;

  /* réguas */
  --rule:#e4e4e7;
  --rule-faint:#efeff1;
  --rule-ink:#d8d4c6;           /* régua sobre creme */

  /* verde (primária) */
  --green:#0fd96b;
  --green-bright:#00ff85;
  --green-soft:#0fd96b1f;
  --green-deep:#0b7a44;
  --accent:#e8f5ec;

  /* metal (hardware) */
  --metal:#c7c7cc;
  --metal-light:#f4f4f6;
  --metal-deep:#8e8e93;

  /* estado */
  --success:#0e8a4d;
  --warning:#b07c00;
  --warning-text:#8a6100;
  --warning-soft:#fdf6e3;
  --destructive:#b3261e;
  --rec:#e5484d;

  /* raios */
  --r-sm:6px; --r:8px; --r-inset:10px; --r-card:12px; --r-pill:9999px;

  /* tipos */
  --font-display:"Clash Display",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"General Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* sombras */
  --sh-card:0 1px 2px rgba(20,20,20,.04),0 8px 24px -12px rgba(20,20,20,.10);
  --sh-green:inset 0 1px 0 #ffffff40,0 4px 14px color-mix(in srgb,var(--green) 35%,transparent);
  --sh-lift:0 2px 4px rgba(20,20,20,.06),0 16px 40px -16px rgba(20,20,20,.18);

  /* layout */
  --maxw:1080px;
  --gutter:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grão de papel — textura sutil, sem imagem */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(20,20,20,.035) 1px,transparent 1px);
  background-size:3px 3px;
}
main,header,footer{position:relative;z-index:1}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.025em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}

/* ── micro-label mono numerado (assinatura "ficha") ───────── */
.label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-fade);
  display:flex;align-items:center;gap:10px;
}
.label::after{content:"";flex:1;height:1px;background:var(--rule-ink)}
.label .n{color:var(--green-deep)}

/* ── botões ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  min-height:52px;
}
.btn-primary{background:var(--green);color:#062d18;box-shadow:var(--sh-green)}
.btn-primary:hover{background:var(--green-bright);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--rule-ink);box-shadow:var(--sh-card)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-wide{width:100%}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── cartões ──────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--sh-card)}

/* ── nota de honestidade (qualificador de renda) ──────────── */
.note{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.55;
  color:var(--warning-text);background:var(--warning-soft);
  border:1px solid color-mix(in srgb,var(--warning) 25%,transparent);
  border-radius:var(--r);padding:11px 14px;
}
.note b{font-weight:600}

/* ── badge ────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--green-soft);color:var(--green-deep);
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
  border-radius:var(--r-pill);padding:7px 14px;font-weight:500;
}
.dot-rec{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:rec 1.8s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.2}}

/* ── entrada escalonada ───────────────────────────────────── */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.16,.84,.44,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}
.d4{animation-delay:.32s}.d5{animation-delay:.41s}.d6{animation-delay:.5s}

/* ── topo ─────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--shell) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-ink);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:17.5px;letter-spacing:-.02em}
.brand .mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,var(--ink),#333);
  display:grid;place-items:center;position:relative;
}
.brand .mark::before{content:"";width:12px;height:8px;border:1.5px solid var(--green);border-radius:2px}
.brand .mark::after{content:"";position:absolute;top:6px;right:6px;width:4px;height:4px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 6px var(--green-bright)}
.top .btn{padding:11px 20px;min-height:44px;font-size:15px}
@media(max-width:560px){.top .btn{display:none}}

/* ── rodapé ───────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule-ink);margin-top:96px;padding:40px 0 56px;background:var(--shell-deep)}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot a{color:var(--ink-mute);text-decoration:none;font-size:14.5px}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot .links{display:flex;flex-wrap:wrap;gap:18px}
.disclosure{
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--ink-mute);
  margin-top:26px;padding-top:20px;border-top:1px dashed var(--rule-ink);max-width:70ch;
}