/* =====================================================================
   8BAC — Design System (produção)
   Cores extraídas da logo: #0066FF (o "8"), #003399 (o "BAC"), fundo #F5F5F5.
   Mobile-first, estética Apple, gamificado.
   ===================================================================== */

:root{
  /* Marca */
  --azul:        #0066FF;   /* primária / ação */
  --azul-escuro: #0052D6;
  --azul-claro:  #E6F0FF;
  --cobalto:     #003399;   /* marca */
  --cobalto-2:   #00246B;
  --dourado:     #E9B23A;   /* conquista / Elite */
  --dourado-2:   #C98A16;

  /* Neutros */
  --bg:      #F5F5F5;
  --surface: #FFFFFF;
  --linha:   #EAECF0;
  --texto:   #101828;
  --muted:   #667085;
  --suave:   #98A2B3;

  /* Estados */
  --ok:     #12B76A;  --ok-bg:  #E7F8F0;
  --alerta: #F79009;  --alerta-bg:#FEF4E6;
  --erro:   #F04438;  --erro-bg: #FEECEB;

  /* Raios e sombras */
  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;
  --sombra:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sombra-md: 0 6px 16px rgba(16,24,40,.10);
  --sombra-lg: 0 12px 32px rgba(0,51,153,.12), 0 4px 10px rgba(16,24,40,.06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 68px;
}

/* ---------- Reset leve ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--texto);
  line-height:1.45; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
a{color:var(--azul);text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ---------- Layout base ---------- */
.container{max-width:720px;margin:0 auto;padding:16px}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---------- Tipografia ---------- */
h1{font-size:26px;font-weight:900;letter-spacing:-.03em}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
h3{font-size:16px;font-weight:700}
.muted{color:var(--muted)}
.big-number{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}

/* ---------- Marca ---------- */
.brand{font-weight:900;font-size:22px;letter-spacing:-.04em;display:inline-flex}
.brand .n8{color:var(--azul)} .brand .bac{color:var(--cobalto)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--linha);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sombra)}
.card-hero{background:linear-gradient(150deg,var(--cobalto),var(--azul));color:#fff;border:none;box-shadow:var(--sombra-lg)}

/* ---------- Botões ---------- */
.btn{
  border:none;cursor:pointer;font-weight:700;font-size:15px;
  padding:14px 22px;border-radius:14px;display:inline-flex;gap:8px;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--azul);color:#fff;box-shadow:0 8px 18px rgba(0,102,255,.28)}
.btn-primary:hover{background:var(--azul-escuro)}
.btn-gold{background:linear-gradient(135deg,var(--dourado),var(--dourado-2));color:#3d2c00;box-shadow:0 8px 18px rgba(233,178,58,.35)}
.btn-ghost{background:var(--surface);color:var(--cobalto);border:1.5px solid var(--linha)}
.btn-block{width:100%}
.btn-lg{font-size:17px;padding:17px 26px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formulários ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600}
.input{
  width:100%;padding:15px 16px;font-size:16px; /* 16px evita zoom no iOS */
  border:1.5px solid var(--linha);border-radius:14px;background:var(--surface);color:var(--texto);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-claro)}
.input::placeholder{color:var(--suave)}

/* ---------- Utilidades ---------- */
.text-center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}

/* ---------- Animações ---------- */
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.animate-pop{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.animate-rise{animation:rise .4s ease both}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}