/* ============================================================================
   SUBWAY LITE — DESIGN SYSTEM v1  ·  "Branco + Azul"
   ----------------------------------------------------------------------------
   Identidade tirada da própria logo (graffiti azul): azul elétrico #0010F0,
   ciano #00D0F0 e navy #000030. Nada de azul genérico de sistema.

   COMO MUDAR A IDENTIDADE DEPOIS: mexa só nos tokens do :root abaixo.
   Nenhum componente tem cor cravada — todos leem variável. Trocar --brand-600
   troca CTA, foco, links, badges e gráficos do site inteiro de uma vez.

   Herança do SubwayFinish: os tokens --orange/--green/--blue continuam
   existindo (páginas antigas ainda os usam) mas agora APONTAM PARA O AZUL.
   É a ponte de compatibilidade — não use esses nomes em código novo.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  /* ── Marca (escala azul, ancorada na logo) ───────────────────────────── */
  --brand-50:#F0F5FF;  --brand-100:#DFE9FF; --brand-200:#C2D6FF;
  --brand-300:#93B4FF; --brand-400:#5C8AFA; --brand-500:#2F63F0;
  --brand-600:#1741E0; /* ★ PRIMÁRIA — CTAs, foco, estado ativo */
  --brand-700:#0F2FB8; --brand-800:#0C2490; --brand-900:#0A1A5C;

  /* ── Ciano (accent de apoio: destaques, gráficos, brilhos) ───────────── */
  --cyan-50:#E8FBFF; --cyan-300:#7FE4F7; --cyan-400:#22D3F0; --cyan-500:#06B6D9;

  /* ── Tinta: navy, não preto. Amarra tudo à logo. ─────────────────────── */
  --ink:#0A1533; --ink-2:#2B3A63; --muted:#5F6C88; --dim:#7C89A8;
  /* --dim e DECORATIVO (borda/icone desligado). Texto usa --muted ou --ink-2. */

  /* ── Superfícies (branco predominante + cinza levemente azulado) ─────── */
  --bg:#FFFFFF; --bg-2:#F5F8FD; --bg-3:#EEF3FB;
  --surface:#FFFFFF; --surface-2:#F5F8FD;
  --border:#E7EDF9; --border-2:#D9E3F5;

  /* ── Semânticos ──────────────────────────────────────────────────────── */
  --success:#0EA46A; --success-2:#0A7D51; --success-ink:#fff; --success-soft:#E6F7F0;
  --danger:#E0384A;  --danger-2:#B32639;  --danger-soft:#FDECEE;
  --warn:#D98014;    --warn-soft:#FEF4E6;

  /* ── Sombras: azuladas e MUITO suaves (profundidade sem peso) ────────── */
  --shadow-sm:0 1px 2px rgba(10,26,92,.04),0 1px 3px rgba(10,26,92,.04);
  --shadow:0 2px 8px rgba(10,26,92,.05),0 8px 24px rgba(10,26,92,.06);
  --shadow-lg:0 8px 24px rgba(10,26,92,.07),0 24px 56px rgba(10,26,92,.09);
  --shadow-brand:0 6px 16px rgba(23,65,224,.22),0 2px 6px rgba(23,65,224,.14);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);

  /* ── Raios: mais contidos que o SubwayFinish (fintech, não bolha) ────── */
  --radius-xs:10px; --radius-sm:12px; --radius:16px; --radius-lg:22px;
  --radius-xl:28px; --radius-pill:999px;

  /* ── Espaçamento (escala de 4) ───────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  /* Números tabulares: saldo/valores não "dançam" ao atualizar */
  --font-num:'Inter',-apple-system,'SF Pro Display',sans-serif;

  /* ── Movimento ───────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-back:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.14s; --t:.22s; --t-slow:.4s;

  /* ── PONTE DE COMPATIBILIDADE (páginas antigas) ──────────────────────── */
  --orange:var(--brand-600); --orange-2:var(--brand-500); --orange-soft:var(--brand-50);
  --green:var(--brand-600);  --green-2:var(--brand-500);  --green-ink:#fff;
  --blue:var(--brand-600);
  --shadow-glow:var(--shadow-brand);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%}
html,body{
  font-family:var(--font-body);color:var(--ink);min-height:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;letter-spacing:-.011em;
}
/* Fundo com profundidade: branco + dois halos de azul quase imperceptíveis.
   `fixed` = não repinta no scroll (barato no celular). */
body{background:#FFFFFF}
/* Papel de parede (graffiti azul claro da marca) numa camada FIXA e própria.
   Por que pseudo-elemento e não background-attachment:fixed no body?
   - iOS Safari não honra `fixed` em background e ainda causa repaint no scroll;
   - aqui a camada é composta na GPU e não repinta = scroll liso no celular.
   O véu branco por cima garante que o texto continue legível sobre o desenho. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:url('/img/bg-lite.webp');
  background-size:cover;background-position:center top;background-repeat:no-repeat;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 45% at 50% 32%, rgba(255,255,255,.86), rgba(255,255,255,.55) 60%, rgba(255,255,255,.32) 100%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
}
/* Navegador sem WebP (Safari antigo): cai no JPG sem quebrar o layout */
@supports not (background-image:url('data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=')){
  body::before{background-image:url('/img/bg-lite.jpg')}
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--brand-100);color:var(--brand-800)}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:6px}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container{width:100%;max-width:460px;margin:0 auto;padding:0 var(--sp-5)}
.container-wide{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--sp-5)}
.section{padding:var(--sp-6) 0}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.row{display:flex;align-items:center;gap:var(--sp-2)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}

/* ── Header ─────────────────────────────────────────────────────────────── */
.brand-nav{
  position:sticky;top:0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);
  padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--border);
}
.brand-nav .logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:17px}
.brand-nav .logo img{height:34px;width:auto}
.brand-nav .nav-actions{display:flex;gap:var(--sp-2);align-items:center}

/* ── Tipografia ─────────────────────────────────────────────────────────── */
.h1{font-family:var(--font-display);font-weight:800;font-size:clamp(27px,7.2vw,34px);line-height:1.06;letter-spacing:-.035em;color:var(--ink)}
.h2{font-weight:800;font-size:21px;letter-spacing:-.025em;color:var(--ink);line-height:1.2}
.h3{font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.015em}
.lead{font-size:15px;color:var(--muted);font-weight:450;line-height:1.55}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
/* Números (saldo, valores): tabular = não treme quando o valor muda */
.num{font-family:var(--font-num);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.title-grad{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,7vw,32px);line-height:1.08;letter-spacing:-.035em;color:var(--ink)}
.title-grad span{background:linear-gradient(135deg,var(--brand-600),var(--cyan-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.accent-green,.accent-orange{color:var(--brand-600)}
.accent-success{color:var(--success)}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-5);position:relative;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t);
}
.card-lg{border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow)}
.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--border-2)}
/* Faixa de marca no topo (bem fina — detalhe, não bloco de cor) */
.card-accent{overflow:hidden}
.card-accent::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand-600),var(--cyan-400))}
/* Card "destaque": fundo azul suave, para o elemento protagonista */
.card-brand{
  background:linear-gradient(160deg,var(--brand-600),var(--brand-800));
  border:none;color:#fff;box-shadow:var(--shadow-brand);overflow:hidden;position:relative;
}
.card-brand::after{content:'';position:absolute;width:260px;height:260px;right:-90px;top:-120px;
  background:radial-gradient(circle,rgba(34,211,240,.34),transparent 68%);pointer-events:none}
.card-brand .h2,.card-brand .h3,.card-brand .num{color:#fff}
.card-brand .muted,.card-brand .small,.card-brand .label{color:rgba(255,255,255,.72)}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:13px 18px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:-.015em;
  line-height:1;text-decoration:none;position:relative;overflow:hidden;
  transition:transform var(--t-fast) var(--ease-back),box-shadow var(--t),background var(--t),border-color var(--t),opacity var(--t);
  -webkit-user-select:none;user-select:none;
}
.btn:active{transform:scale(.975)}
.btn.full{width:100%}
.btn svg{flex-shrink:0}

.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-brand);font-weight:800;font-size:16px;padding:16px 22px}
.btn-primary:hover{background:var(--brand-700)}
.btn-secondary{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100);font-weight:700}
.btn-secondary:hover{background:var(--brand-100)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--border-2);padding:11px 15px;font-size:14px}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--ink)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--border-2)}
.btn-outline:hover{background:var(--surface-2)}
.btn-success{background:var(--success);color:#fff;font-weight:800;font-size:16px;padding:16px 22px;box-shadow:0 6px 16px rgba(14,164,106,.22)}
.btn-success:hover{background:var(--success-2)}
.btn-danger{background:var(--danger);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(224,56,74,.2)}
.btn-danger:hover{background:var(--danger-2)}
.btn-accent{background:var(--ink);color:#fff;font-weight:800;font-size:16px;padding:16px 22px;box-shadow:var(--shadow)}
.btn-accent:hover{background:#111E44}
.btn-pill{padding:10px 18px;border-radius:var(--radius-pill);font-weight:800;font-size:13px;background:var(--brand-600);color:#fff;border:none;box-shadow:var(--shadow-brand)}
.btn-pill:hover{background:var(--brand-700)}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:var(--radius-xs)}
.btn-lg{padding:18px 26px;font-size:17px;border-radius:var(--radius)}

/* Desabilitado: continua legível e CLICÁVEL (regra do Paulo: botão travado
   avisa o motivo — quem bloqueia é o handler, não `disabled` + opacidade). */
.btn.is-disabled,.btn[aria-disabled="true"]{
  background:var(--surface-2);color:var(--dim);box-shadow:none;border-color:var(--border);cursor:pointer;
}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Carregando: spinner substitui o rótulo, largura NÃO muda (nada "pula") */
.btn.is-loading{color:transparent!important;pointer-events:none;position:relative}
.btn.is-loading::after{
  content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;
}
.btn-secondary.is-loading::after,.btn-ghost.is-loading::after,.btn-outline.is-loading::after{
  border-color:rgba(23,65,224,.25);border-top-color:var(--brand-600)
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .shine{display:none}

/* ── Campos ─────────────────────────────────────────────────────────────── */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border-2);background:#fff;color:var(--ink);
  font-family:var(--font-body);
  /* 16px é obrigatório: abaixo disso o Safari iOS dá zoom ao focar */
  font-size:16px;font-weight:500;outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-50);background:#fff
}
.field input::placeholder{color:var(--dim);font-weight:400}
.field input:disabled{background:var(--surface-2);color:var(--muted)}
.field.has-error input{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.field-msg{font-size:12px;font-weight:600;margin-top:6px;color:var(--muted)}
.field.has-error .field-msg{color:var(--danger)}
.input-group{display:flex;align-items:center;gap:var(--sp-2);border:1.5px solid var(--border-2);
  border-radius:var(--radius-sm);background:#fff;padding:0 14px;transition:border-color var(--t),box-shadow var(--t)}
.input-group:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-50)}
.input-group .prefix{font-weight:700;color:var(--muted);font-size:15px}
.input-group input{border:none!important;box-shadow:none!important;padding:15px 0!important;flex:1}

/* ── Chips / badges ─────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:700;background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100)}
.chip-orange,.chip-blue{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.chip-success{background:var(--success-soft);color:var(--success-2);border-color:#CBEEDF}
.chip-danger{background:var(--danger-soft);color:var(--danger-2);border-color:#F8D3D8}
.chip-neutral{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--radius-pill);background:var(--danger);color:#fff;font-size:11px;font-weight:800}
.trust-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin:var(--sp-4) 0}

/* ── Alertas ────────────────────────────────────────────────────────────── */
.alert{padding:13px 15px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;
  margin-bottom:var(--sp-4);text-align:center;border:1px solid transparent}
.alert-err{background:var(--danger-soft);color:var(--danger-2);border-color:#F8D3D8}
.alert-ok{background:var(--success-soft);color:var(--success-2);border-color:#CBEEDF}
.alert-warn{background:var(--warn-soft);color:#9A5A0B;border-color:#F7E2C2}
.alert-info{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.sl-toast-wrap{position:fixed;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  z-index:400;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.sl-toast{background:var(--ink);color:#fff;padding:13px 18px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);max-width:420px;width:100%;
  display:flex;align-items:center;gap:10px;animation:toastIn .34s var(--ease-back) both}
.sl-toast-ok{background:var(--success)} .toast-err{background:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ── Modais (sheet no mobile, diálogo no desktop) ───────────────────────── */
.ovl{position:fixed;inset:0;z-index:300;background:rgba(10,21,51,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:flex-end;justify-content:center}
.ovl.on{display:flex;animation:ovlIn var(--t) ease both}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
.sheet{
  background:#fff;width:100%;max-width:460px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--sp-5);padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px));
  /* Teto de altura + rolagem interna: teclado do iPhone não empurra o conteúdo pra fora */
  max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 -12px 40px rgba(10,26,92,.16);animation:sheetIn .34s var(--ease) both;position:relative
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Alça + cabeçalho grudado: o X nunca some ao rolar */
.sheet-head{position:sticky;top:0;background:#fff;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);padding-bottom:var(--sp-3);margin-bottom:var(--sp-2)}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--border-2);margin:0 auto var(--sp-4)}
.sheet-x{width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.sheet-x:hover{background:var(--bg-3);color:var(--ink)}
@media(min-width:600px){
  .ovl{align-items:center}
  .sheet{border-radius:var(--radius-xl);max-height:86vh;animation:dlgIn .3s var(--ease-back) both}
  @keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
}

/* ── Navegação inferior (app-like) ──────────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:5px 2px;color:var(--dim);font-size:10.5px;font-weight:700;letter-spacing:-.01em;
  transition:color var(--t);position:relative;min-height:46px}
.tabbar a svg{width:22px;height:22px;stroke-width:2}
.tabbar a.on{color:var(--brand-600)}
.tabbar a.on::before{content:'';position:absolute;top:0;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--brand-600)}
.tabbar a:active{transform:scale(.94)}
/* Item central (Jogar) em destaque — o jogo é o protagonista */
.tabbar a.tab-play{color:#fff}
.tabbar a.tab-play .tab-ico{width:46px;height:46px;border-radius:15px;background:var(--brand-600);
  box-shadow:var(--shadow-brand);display:flex;align-items:center;justify-content:center;margin-top:-16px;
  border:3px solid #fff;transition:transform var(--t) var(--ease-back)}
.tabbar a.tab-play:active .tab-ico{transform:scale(.92)}
.tabbar a.tab-play span{color:var(--brand-700)}
/* Reserva o espaço da tabbar para o conteúdo não ficar embaixo dela */
.has-tabbar{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}

/* ── Prova social / ticker ──────────────────────────────────────────────── */
.sp-bar{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--border);margin:var(--sp-3) 0;box-shadow:var(--shadow-sm)}
.sp-avs{display:flex}
.sp-av{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--brand-600);
  display:flex;align-items:center;justify-content:center;font-size:14px;margin-left:-9px;color:#fff}
.sp-av:first-child{margin-left:0}
.sp-txt{font-size:12px;color:var(--muted);font-weight:600;line-height:1.35}
.sp-txt strong{color:var(--ink);display:block;font-size:13px}
.ticker{overflow:hidden;border:1px solid var(--border);background:#fff;border-radius:var(--radius);
  padding:11px 13px;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;
  gap:10px;box-shadow:var(--shadow-sm)}
.ticker .dot-pulse{flex-shrink:0}
.ticker-rail{overflow:hidden;flex:1}
.ticker-track{display:flex;gap:28px;white-space:nowrap;animation:ticker 34s linear infinite}
.ticker-track strong{color:var(--success)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dot-pulse{width:8px;height:8px;border-radius:50%;background:var(--success);animation:dot-pulse 1.6s ease-in-out infinite}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 rgba(14,164,106,.45)}70%{box-shadow:0 0 0 9px rgba(14,164,106,0)}100%{box-shadow:0 0 0 0 rgba(14,164,106,0)}}

/* ── Hero / features / passos ───────────────────────────────────────────── */
.hero{padding:var(--sp-6) 0 var(--sp-4)}
.hero-card{background:#fff;border-radius:var(--radius-xl);padding:var(--sp-6) var(--sp-5);
  box-shadow:var(--shadow);border:1px solid var(--border);position:relative;overflow:hidden}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-4)}
.feat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px;
  box-shadow:var(--shadow-sm);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.feat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.feat-ico{width:38px;height:38px;border-radius:11px;background:var(--brand-50);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:20px}
.feat-t{font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.015em;margin-bottom:3px}
.feat-s{font-size:12.5px;color:var(--muted);font-weight:450;line-height:1.45}
.steps{margin-top:var(--sp-4)}
.step-item{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:9px;background:var(--brand-50);
  color:var(--brand-700);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.step-txt{font-size:13px;color:var(--muted);font-weight:500;line-height:1.45;padding-top:3px}
.step-txt strong{color:var(--ink);font-weight:700}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.brand-footer{text-align:center;padding:var(--sp-6) var(--sp-4) var(--sp-10);font-size:12px;color:var(--muted);font-weight:450}
.brand-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pay-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.pay-pill{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xs);padding:7px 11px;
  font-size:11px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px}

/* ── Animações e estados de carregamento ────────────────────────────────── */
.fade-in{animation:fadeIn .45s var(--ease) both}
.fade-in-up{animation:fadeUp .5s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.delay-1{animation-delay:.04s}.delay-2{animation-delay:.08s}.delay-3{animation-delay:.12s}
.delay-4{animation-delay:.16s}.delay-5{animation-delay:.2s}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Saldo que acabou de mudar: pulso curto de marca (feedback sem susto) */
.bump{animation:bump .5s var(--ease-back)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.06);color:var(--brand-600)}100%{transform:scale(1)}}
.skel{background:linear-gradient(90deg,var(--bg-2) 25%,#FFFFFF 37%,var(--bg-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-xs)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Contraste mínimo garantido (auditoria 2026-08-19) ────────────────────
   --dim reprovava em texto (2.44:1). Texto secundário agora usa --muted
   (5.27:1) e placeholder idem — placeholder invisível é bug, não estilo. */
.field input::placeholder,.field textarea::placeholder,input::placeholder{color:var(--muted);opacity:1}
.tabbar a{color:var(--muted)}

/* ── iOS: fonte <16px em campo de texto faz o Safari dar ZOOM ao focar,
   quebrando o layout. 16px aqui e piso tecnico, nao escolha estetica. ──── */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,textarea{font-size:16px}