/* =========================================================
   PAG — crédito pessoal com parcelas diárias ou semanais
   Visual institucional: azul da marca, fundo claro, tipografia
   sóbria e movimento discreto. Mobile primeiro.
   ========================================================= */
:root {
  --navy-950: #050f24;
  --navy-900: #081a3d;
  --navy-800: #0b2556;
  --brand: #0b45a5;        /* azul do logo */
  --brand-600: #0f52c2;
  --brand-500: #1f66e5;
  --brand-100: #dbe6fb;
  --brand-50: #eef3fc;
  --ink: #0a1530;
  --text: #3a4560;
  --muted: #6b7690;
  --line: #e2e7f0;
  --line-2: #eef1f6;
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --ok: #0f9d6b;
  --ok-50: #e6f6ef;
  --warn: #b7791f;
  --warn-50: #fdf6e7;
  --danger: #d13a4a;
  --radius: 16px;
  --radius-s: 10px;
  --shadow-s: 0 1px 2px rgba(10, 21, 48, .06), 0 2px 8px rgba(10, 21, 48, .04);
  --shadow: 0 1px 2px rgba(10, 21, 48, .05), 0 12px 32px -12px rgba(10, 21, 48, .18);
  --shadow-l: 0 2px 4px rgba(5, 15, 36, .1), 0 32px 64px -24px rgba(5, 15, 36, .45);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --gutter: 16px;
  --max: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);     /* saída longa e suave: entradas e hovers */
  --ease-io: cubic-bezier(.65, 0, .35, 1); /* ida e volta: brilhos */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01';
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--display); letter-spacing: -.025em; line-height: 1.1; margin: 0; font-weight: 600; }
::selection { background: var(--brand-100); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }
.num { font-variant-numeric: tabular-nums; }

/* ---------- movimento base ----------
   Tudo que entra na tela usa o mesmo "up": sobe 24px e aparece. Só o ponto
   de partida é animado (fill backwards), então hovers e transforms ficam livres. */
@keyframes up { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* ---------- marca ---------- */
.logo { display: inline-flex; align-items: center; color: inherit; }
.logo img { height: 30px; width: auto; }
.logo__b { display: none; }
.nav.is-solid .logo__w, body.menu-open .nav .logo__w { display: none; }
.nav.is-solid .logo__b, body.menu-open .nav .logo__b { display: block; }
.logo--blue img { height: 24px; }
.logo--xl img { height: 48px; }

/* logo grande do herói: a marca recortada com um brilho que passa uma vez por dentro dela */
.hero__logo {
  width: clamp(150px, 40vw, 400px); aspect-ratio: 1200 / 554; margin-bottom: 24px;
  background: linear-gradient(105deg, #fff 0%, #fff 40%, #9cc0ff 47%, #ffffff 50%, #9cc0ff 53%, #fff 60%, #fff 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url('../img/pag-logo-branco.png') center / contain no-repeat;
  mask: url('../img/pag-logo-branco.png') center / contain no-repeat;
  filter: drop-shadow(0 18px 40px rgba(31, 102, 229, .55));
}
.hero .hero__logo { animation: up 1s var(--ease) .1s backwards, logoShine 1.8s 1.1s var(--ease-io) both; }
@media (min-width: 1000px) { .hero__logo { margin-bottom: 28px; } }
.auth__side .logo--xl img { height: 64px; }
@keyframes logoShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(11,69,165,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--white { background: #fff; color: var(--brand); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.btn .arrow { transition: transform .35s var(--ease); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--brand-600); box-shadow: 0 10px 24px -10px rgba(11,69,165,.65); transform: translateY(-1px); }
  .btn--white:hover { background: var(--brand-50); transform: translateY(-1px); }
  .btn--line:hover { border-color: #c8d1e0; background: var(--bg-soft); }
  .btn--glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn:active { transform: scale(.98); transition-duration: .1s; }

.link { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { color: var(--brand-600); }
.link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ---------- navegação ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; color: #fff; transition: background-color .4s var(--ease), color .4s, box-shadow .4s; animation: navIn 1s var(--ease) backwards; }
@keyframes navIn { from { transform: translateY(-100%); opacity: 0; } }
.nav.is-glass { background: rgba(8, 26, 61, .62); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,.07); }
.nav.is-solid { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav__in { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__links { display: none; gap: 2px; margin-right: auto; margin-left: 24px; }
.nav__links a { padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; opacity: .78; transition: opacity .25s, background-color .25s; }
.nav__links a:hover, .nav__links a.is-active { opacity: 1; background: rgba(127,140,170,.12); }
.nav__cta { display: none; gap: 8px; align-items: center; }
.nav__cta .btn--ghost { color: inherit; background: none; border: 0; padding: 0 12px; }
.nav__cta .btn--ghost:hover { background: rgba(127,140,170,.12); }
.nav:not(.is-solid) .nav__cta .btn--primary { background: #fff; color: var(--brand); box-shadow: none; }
.nav__burger { width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 10px; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: inherit; }
.nav__burger span { width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), opacity .2s; }
body.menu-open .nav { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .nav__links, .nav__cta { display: flex; } .nav__burger { display: none; } }
.mmenu {
  position: fixed; inset: 68px 0 0; z-index: 99; background: #fff; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
body.menu-open { overflow: hidden; }
body.menu-open .mmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s; }
/* itens do menu entram um a um */
.mmenu > * { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .2s, transform .2s; }
body.menu-open .mmenu > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 35ms + 60ms); }
.mmenu a.mlink { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--ink); }
.mmenu a.mlink svg { width: 18px; height: 18px; color: var(--muted); }
.mmenu__cta { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

/* ---------- herói ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; padding: 100px 0 64px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
.hero::before { /* brilho azul da marca */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(31,102,229,.38), transparent 65%),
    radial-gradient(700px 500px at 0% 100%, rgba(11,69,165,.35), transparent 60%);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 70%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__glow { /* luz que acompanha o cursor */
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 50%), rgba(80,140,255,.14), transparent 65%);
}
.hero:hover .hero__glow { opacity: 1; }
.hero::after { /* desvanece para a seção seguinte */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,15,36,.6));
}
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1000px) { .hero { padding: 148px 0 112px; } .hero__in { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.tag b { padding: 2px 8px; border-radius: 999px; background: var(--brand-500); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.hero h1 { color: #fff; margin: 20px 0 18px; font-size: clamp(36px, 9.4vw, 64px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; }
.hero h1 > span:not(.w) { color: #8fb6ff; }
.hero__lead { font-size: clamp(16px, 2vw, 19px); color: rgba(226,234,250,.78); max-width: 540px; margin: 0 0 28px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn { flex: 1 1 auto; min-height: 52px; }
@media (min-width: 560px) { .hero__ctas .btn { flex: 0 0 auto; } }
.hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.hero__facts b { display: block; font-family: var(--display); color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hero__facts > div > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgba(226,234,250,.6); }
@media (max-width: 480px) { .hero__facts { grid-template-columns: repeat(3, 1fr); gap: 14px; } .hero__facts b { font-size: 22px; } .hero__facts > div > span { font-size: 12.5px; } }

/* entrada do herói: cada bloco sobe em sequência, logo depois do menu */
.rise { animation: up 1s var(--ease) .2s backwards; }
.rise.d1 { animation-delay: .25s; } .rise.d2 { animation-delay: .5s; } .rise.d3 { animation-delay: .62s; } .rise.d4 { animation-delay: .74s; }

/* título que entra palavra por palavra, saindo de trás de uma máscara */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em 0 .12em; margin: -.04em 0 -.12em; }
.split .w > i { display: inline-block; font-style: normal; transform: translate3d(0, 112%, 0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 45ms + 300ms); }
.split.is-on .w > i { transform: none; }
.js .split:not(.is-split) { visibility: hidden; }

/* ---------- simulador (cartão do herói) ---------- */
.sim {
  position: relative; background: #fff; color: var(--text); border-radius: 20px; padding: 22px 20px;
  box-shadow: var(--shadow-l), 0 0 0 1px rgba(143,182,255,.25);
}
@media (min-width: 768px) { .sim { padding: 32px; } }
.sim::after { /* reflexo que passa pelo cartão uma vez ao carregar */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0; animation: sheen 1.4s 1.2s var(--ease-io) forwards;
}
@keyframes sheen { to { background-position: -150% 0; } }
.sim__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sim__head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sim__head small { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sim__head small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: live 2.4s var(--ease) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(15,157,107,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(15,157,107,0); } }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 10px 6px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); transition: color .3s; line-height: 1.25; }
.seg button small { display: block; font-weight: 500; font-size: 12px; }
.seg button.is-on { color: var(--ink); }
.seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: #fff; box-shadow: var(--shadow-s), 0 0 0 1px var(--line); transition: transform .5s var(--ease); }
.seg[data-mode='semanal'] .seg__thumb { transform: translateX(100%); }
.sim__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 22px 0 6px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.sim__amount { display: flex; align-items: baseline; gap: 6px; font-family: var(--display); color: var(--ink); font-weight: 600; letter-spacing: -.035em; line-height: 1; margin-bottom: 18px; }
.sim__amount small { font-size: 20px; color: var(--muted); font-weight: 500; }
.sim__amount span { font-size: clamp(40px, 11vw, 48px); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 10px 0; border-radius: 99px; outline: none; cursor: pointer; touch-action: pan-y;
  background: linear-gradient(var(--brand), var(--brand)) 0 / var(--p, 30%) 100% no-repeat, var(--line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 6px rgba(10,21,48,.2); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.range:hover::-webkit-slider-thumb, .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(11,69,165,.12), 0 2px 6px rgba(10,21,48,.2); }
.range:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(11,69,165,.14), 0 2px 6px rgba(10,21,48,.2); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.sim__marks { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sim__out { margin-top: 22px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; }
.sim__parcela { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 16px; }
.sim__parcela small { display: block; color: var(--muted); font-size: 13px; }
.sim__parcela b { display: inline-block; font-family: var(--display); font-size: clamp(28px, 8vw, 32px); font-weight: 600; letter-spacing: -.03em; color: var(--brand); line-height: 1.15; white-space: nowrap; }
.sim__qtd { text-align: right; font-size: 13px; color: var(--muted); }
.sim__qtd b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); font-weight: 600; }
.track { display: grid; gap: 3px; padding: 0 16px 16px; grid-template-columns: repeat(20, 1fr); }
.track.is-week { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.track i { height: 6px; border-radius: 3px; background: var(--brand-100); transition: background-color .4s var(--ease); }
.track i.on { background: var(--brand); }
.sim__rows { border-top: 1px solid var(--line); padding: 4px 16px; background: #fff; }
.sim__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.sim__rows div + div { border-top: 1px dashed var(--line); }
.sim__rows span { color: var(--muted); }
.sim__rows b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sim .btn { margin-top: 18px; }
@media (min-width: 768px) { .sim__parcela { padding: 18px 18px 16px; } .track { padding: 0 18px 16px; } .sim__rows { padding: 4px 18px; } }
@media (max-width: 380px) { .sim .btn { font-size: 14px; padding: 8px 14px; white-space: normal; text-align: center; line-height: 1.3; } }
.fine { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; }

/* ---------- seções ---------- */
.section { padding: 72px 0; }
@media (min-width: 768px) { .section { padding: 120px 0; } }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--navy-950); color: rgba(226,234,250,.75); }
.section--dark h2, .section--dark h3 { color: #fff; }
.kicker { display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: .02em; margin-bottom: 14px; }
.section--dark .kicker { color: #8fb6ff; }
.h2 { font-size: clamp(28px, 7.4vw, 46px); font-weight: 600; letter-spacing: -.032em; line-height: 1.08; }
.lead { font-size: clamp(16px, 4.4vw, 17.5px); color: var(--muted); max-width: 600px; margin: 18px 0 0; }
.section--dark .lead { color: rgba(226,234,250,.65); }
.head { margin-bottom: 40px; max-width: 720px; }
@media (min-width: 768px) { .head { margin-bottom: 56px; } }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head--center .lead { margin-left: auto; margin-right: auto; }
.head--split { display: grid; gap: 4px; max-width: none; }
@media (min-width: 900px) { .head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } .head--split .lead { margin: 0; } }

/* entradas ao rolar: só escondem quando o JS está ativo (classe .js no <html>) */
.js .reveal:not(.is-in), .js .stagger:not(.is-in) > * { opacity: 0; }
.reveal.is-in { animation: up 1s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 90ms); }
.reveal[data-d='1'] { --d: 1; } .reveal[data-d='2'] { --d: 2; } .reveal[data-d='3'] { --d: 3; }
.stagger.is-in > * { animation: up .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }

/* ---------- faixa de garantias ---------- */
.assure { border-bottom: 1px solid var(--line); }
.assure__in { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.assure__item { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; }
.assure__item:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .assure__in { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .assure__item { flex-direction: row; gap: 14px; padding: 28px 12px 28px 0; }
  .assure__item:nth-child(n+3) { border-top: 0; }
  .assure__item + .assure__item { padding-left: 28px; border-left: 1px solid var(--line); }
}
.assure__item svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.assure__item b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.assure__item span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
/* ícones das garantias acendem em sequência */
.assure.is-in .assure__item svg { animation: iconIn .8s var(--ease) backwards; }
.assure.is-in .assure__item:nth-child(2) svg { animation-delay: .09s; } .assure.is-in .assure__item:nth-child(3) svg { animation-delay: .18s; } .assure.is-in .assure__item:nth-child(4) svg { animation-delay: .27s; }
@keyframes iconIn { from { transform: scale(.6); opacity: 0; } }

/* ---------- modalidades ---------- */
.plans { display: grid; gap: 16px; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; gap: 24px; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); transition: box-shadow .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
@media (hover: hover) { .plan:hover { box-shadow: var(--shadow); border-color: #cfd8e8; transform: translateY(-4px); } }
@media (min-width: 768px) { .plan { padding: 40px; } }
.plan__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.plan__ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
.plan__ic svg { width: 24px; height: 24px; }
.plan__badge { padding: 5px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: 12px; font-weight: 600; }
.plan h3 { margin: 22px 0 8px; font-size: 22px; }
.plan > p { margin: 0 0 22px; color: var(--muted); }
.plan__n { display: flex; align-items: baseline; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.plan__n b { font-family: var(--display); font-size: 48px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.plan__n span { color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; font-size: 15px; color: var(--text); }
.plan li svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 3px; }
.plan .btn { margin-top: auto; }
@media (min-width: 560px) { .plan .btn { align-self: flex-start; } }
@media (min-width: 768px) { .plan h3 { margin-top: 24px; font-size: 24px; } .plan__n { padding: 20px 0; } .plan__n b { font-size: 56px; } .plan ul { margin-bottom: 32px; } }

/* ---------- como funciona ---------- */
.steps { display: grid; gap: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.step { position: relative; padding: 0 0 32px 56px; }
/* trilho cinza e, por cima, o trecho azul que se preenche quando a seção aparece */
.step::before, .step::after { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--line); }
.step::after { background: var(--brand); transform-origin: 50% 0; transform: scaleY(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 350ms); }
.step:last-child::before, .step:last-child::after { display: none; }
.steps.is-in .step::after { transform: none; }
.step__n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: 14px;
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 200ms); }
.steps.is-in .step__n { background: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-50); }
@media (min-width: 900px) {
  .step { padding: 56px 0 0; }
  .step::before, .step::after { left: 44px; right: -32px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .step::after { transform-origin: 0 50%; transform: scaleX(0); }
}
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- plataforma (painel do cliente) ---------- */
.platform { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .platform { grid-template-columns: .85fr 1.15fr; gap: 72px; } }
.feat { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 20px; }
.feat li { display: flex; gap: 16px; }
.feat__ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(143,182,255,.1); border: 1px solid rgba(143,182,255,.18); color: #8fb6ff; }
.feat__ic svg { width: 20px; height: 20px; }
.feat b { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.feat span { font-size: 15px; }

.window { border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); color: var(--text); font-size: 13px; }
/* painel do cliente "deita" em 3D e se endireita conforme a rolagem (--st vem do JS, de 1 a 0) */
[data-scrolltilt] { --tilt: 10deg; transform: perspective(1600px) rotateX(calc(var(--st, 0) * var(--tilt))) scale(calc(1 - var(--st, 0) * .05)); transform-origin: 50% 100%; opacity: calc(1 - var(--st, 0) * .4); will-change: transform; }
@media (min-width: 1000px) { [data-scrolltilt] { --tilt: 16deg; } }
.window__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe6; flex: none; }
.window__url { margin-left: 12px; flex: 1; min-width: 0; max-width: 300px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.window__url svg { width: 11px; height: 11px; color: var(--ok); flex: none; }
.dash { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dash { grid-template-columns: 150px 1fr; } }
.dash__side { display: none; padding: 16px 12px; border-right: 1px solid var(--line); background: #fbfcfe; }
@media (min-width: 640px) { .dash__side { display: block; } }
.dash__side .logo { margin: 0 6px 18px; color: var(--ink); }
.dash__side .logo__icon { width: 24px; height: 24px; border-radius: 6px; }
.dash__side .logo__word { font-size: 18px; }
.dash__nav { display: grid; gap: 2px; }
.dash__nav span { padding: 7px 10px; border-radius: 7px; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.dash__nav span.on { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.dash__main { padding: 14px; display: grid; gap: 12px; min-width: 0; }
@media (min-width: 480px) { .dash__main { padding: 18px; gap: 14px; } }
.dash__hello { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash__hello b { color: var(--ink); font-size: 15px; font-family: var(--display); }
.dash__hello small { display: block; color: var(--muted); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ok-50); color: var(--ok); white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); min-width: 0; }
.kpi small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.kpi b { display: block; font-family: var(--display); color: var(--ink); font-size: clamp(13.5px, 3.6vw, 17px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
@media (min-width: 480px) { .kpis { gap: 10px; } .kpi { padding: 12px; } }
.kpi--brand { background: var(--brand); border-color: var(--brand); }
.kpi--brand small { color: rgba(255,255,255,.7); }
.kpi--brand b { color: #fff; }
.contract { padding: 14px; border-radius: 10px; border: 1px solid var(--line); }
.contract__top { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
.contract__top b { color: var(--ink); }
.bar { height: 8px; border-radius: 99px; background: var(--brand-50); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w, 30%); border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-500)); transition: width 1s var(--ease); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 9px 6px; border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 12px; white-space: nowrap; }
@media (min-width: 480px) { .table th { padding: 0 8px 8px; } .table td { padding: 9px 8px; font-size: 12.5px; } }
.table td:last-child, .table th:last-child { text-align: right; }
.st { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; transition: background-color .4s, color .4s; }
.st--ok { background: var(--ok-50); color: var(--ok); }
.st--due { background: var(--brand-50); color: var(--brand); }
.st--next { background: var(--bg-soft); color: var(--muted); }
.table tr.flash td { animation: flash 1.4s var(--ease); }
@keyframes flash { 0% { background: var(--ok-50); } 100% { background: transparent; } }

/* ---------- segurança ---------- */
.sec { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
@media (min-width: 760px) { .sec { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sec { grid-template-columns: repeat(4, 1fr); } }
.sec__item { background: #fff; padding: 26px 22px; }
@media (min-width: 768px) { .sec__item { padding: 32px 28px; } }
.sec__item svg { width: 26px; height: 26px; color: var(--brand); margin-bottom: 18px; }
.sec__item h3 { font-size: 17px; margin-bottom: 8px; }
.sec__item p { margin: 0; font-size: 15px; color: var(--muted); }
.notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 18px; border-radius: 14px; background: var(--warn-50); border: 1px solid #f1dfb5; }
@media (min-width: 768px) { .notice { gap: 16px; margin-top: 24px; padding: 20px 22px; } }
.notice svg { width: 22px; height: 22px; flex: none; color: var(--warn); margin-top: 1px; }
.notice b { color: var(--ink); }
.notice p { margin: 2px 0 0; font-size: 15px; }

/* ---------- PAG Pay ---------- */
.gw { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .gw { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.soon { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(143,182,255,.1); color: #8fb6ff; border: 1px solid rgba(143,182,255,.25); margin-bottom: 20px; }
.soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(143,182,255,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(143,182,255,0); } }
@keyframes blink { 50% { opacity: 0; } }
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 28px 0; background: rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.methods div { background: var(--navy-950); padding: 14px 16px; }
@media (min-width: 768px) { .methods { margin: 32px 0; } .methods div { padding: 16px 18px; } }
.methods b { display: block; color: #fff; font-size: 15px; font-weight: 600; }
.methods span { display: block; font-size: 13px; line-height: 1.45; color: rgba(226,234,250,.55); }
.gw .btn--glass { width: 100%; }
@media (min-width: 560px) { .gw .btn--glass { width: auto; } }
.code { border-radius: 14px; background: #0a1430; border: 1px solid rgba(255,255,255,.08); overflow: hidden; font-family: var(--mono); font-size: 11.5px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
@media (min-width: 560px) { .code { font-size: 12.5px; } }
.code__bar { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.code__tab { padding: 10px 12px; color: rgba(226,234,250,.5); font-size: 12px; }
.code__tab.on { color: #fff; box-shadow: inset 0 -2px 0 var(--brand-500); }
.code pre { margin: 0; padding: 16px; min-height: 280px; white-space: pre-wrap; word-break: break-word; line-height: 1.75; color: #c6d3ee; }
@media (min-width: 560px) { .code pre { padding: 18px 20px; min-height: 300px; } }
.code .k { color: #c792ea; } .code .s { color: #a5d6a7; } .code .n { color: #f7c87a; } .code .c { color: #5d6f96; } .code .f { color: #82aaff; }
.caret { display: inline-block; width: 7px; height: 1.1em; vertical-align: -2px; background: #82aaff; animation: blink 1s steps(1) infinite; }
.code__out { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07); color: #7fd4a8; font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (min-width: 560px) { .code__out { padding: 12px 20px; } }
.code__out.is-on { opacity: 1; transform: none; }
.code__out svg { width: 16px; height: 16px; flex: none; }

/* ---------- aplicativos ---------- */
.apps { display: grid; gap: 14px; }
@media (min-width: 860px) { .apps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.appc { display: flex; flex-direction: column; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: box-shadow .5s var(--ease), border-color .5s var(--ease); }
@media (min-width: 768px) { .appc { padding: 28px; } }
@media (hover: hover) { .appc:hover { box-shadow: var(--shadow); border-color: #cfd8e8; } }
.appc__ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; margin-bottom: 20px; }
.appc__ic svg { width: 24px; height: 24px; }
.appc h3 { font-size: 20px; margin-bottom: 6px; }
.appc p { margin: 0 0 6px; color: var(--muted); font-size: 15px; flex: 1; }
.appc small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 20px; }

/* ---------- perguntas ---------- */
.faq { display: grid; max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ink); transition: color .25s; }
@media (hover: hover) { .faq summary:hover { color: var(--brand); } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 20px; height: 20px; flex: none; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; background: var(--muted); border-radius: 2px; transition: transform .45s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open]:not(.is-closing) summary i::after { transform: rotate(0); }
.faq details > div { padding: 0 0 22px; color: var(--muted); overflow: hidden; }
@media (min-width: 768px) { .faq summary { padding: 22px 0; font-size: 17px; } .faq details > div { padding: 0 40px 24px 0; } }

/* ---------- chamada final ---------- */
.band { position: relative; overflow: hidden; border-radius: 22px; padding: 40px 22px; background: linear-gradient(135deg, var(--brand) 0%, #082f7a 100%); color: #fff; display: grid; gap: 26px; align-items: center; }
.band::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 60px rgba(255,255,255,.03), 0 0 0 120px rgba(255,255,255,.02); pointer-events: none; }
@media (min-width: 900px) { .band { grid-template-columns: 1fr auto; padding: 64px; border-radius: 24px; } }
.band > div { position: relative; z-index: 1; }
.band h2 { color: #fff; font-size: clamp(26px, 6.6vw, 40px); }
.band p { margin: 12px 0 0; color: rgba(255,255,255,.75); font-size: 16.5px; }
.band .hero__ctas .btn { flex: 1 1 140px; }
@media (min-width: 560px) { .band .hero__ctas .btn { flex: 0 0 auto; } }

/* ---------- rodapé ---------- */
.footer { background: var(--navy-950); color: rgba(226,234,250,.6); padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14px; }
@media (min-width: 768px) { .footer { padding-top: 72px; } }
.footer .logo { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; } .footer__grid > :first-child { grid-column: auto; } }
.footer h4 { color: #fff; font-size: 14px; font-family: var(--font); letter-spacing: 0; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { transition: color .25s; }
.footer a:hover { color: #fff; }
.footer__legal { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 12px; font-size: 12.5px; line-height: 1.65; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; margin-top: 8px; }

/* ---------- barra fixa de ação (celular) ---------- */
.mcta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px;
  background: rgba(8, 26, 61, .9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-l); color: #fff;
  transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s;
}
.mcta.is-on { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
body.menu-open .mcta { transform: translateY(calc(100% + 24px)); }
.mcta div { min-width: 0; line-height: 1.3; }
.mcta small { display: block; font-size: 12px; color: rgba(226,234,250,.65); }
.mcta b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcta .btn { flex: none; }
@media (min-width: 1000px) { .mcta { display: none; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 300; transform: translate(-50%, 150%); opacity: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; max-width: calc(100% - 32px); width: max-content;
  background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.45; box-shadow: var(--shadow-l); transition: transform .5s var(--ease), opacity .4s, bottom .5s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 20px; height: 20px; color: #8fb6ff; flex: none; }
@media (min-width: 768px) { .toast { bottom: 24px; } }
@media (max-width: 999px) { body.has-mcta .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* =========================================================
   Página Entrar / Criar conta / Baixar
   ========================================================= */
.auth { min-height: 100svh; display: grid; background: #fff; }
@media (min-width: 1000px) { .auth { grid-template-columns: minmax(420px, 5fr) 7fr; } }
.auth__side { position: relative; overflow: hidden; display: none; flex-direction: column; padding: 40px 48px; color: rgba(226,234,250,.7);
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.auth__side::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 500px at 100% 0%, rgba(31,102,229,.35), transparent 60%); }
.auth__side > :not(canvas) { position: relative; animation: up 1s var(--ease) backwards; }
.auth__side > :nth-child(3) { animation-delay: .08s; } .auth__side > :nth-child(4) { animation-delay: .16s; } .auth__side > :nth-child(5) { animation-delay: .24s; } .auth__side > :nth-child(6) { animation-delay: .32s; }
.auth__side .logo { color: #fff; }
@media (min-width: 1000px) { .auth__side { display: flex; } }
.auth__side h2 { color: #fff; margin-top: auto; font-size: clamp(30px, 2.8vw, 40px); }
.auth__side h2 span { color: #8fb6ff; }
.auth__side > p { margin: 16px 0 0; max-width: 400px; }
.auth__list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.auth__list li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.auth__list svg { width: 18px; height: 18px; color: #8fb6ff; flex: none; }
.auth__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; }
.auth__main { display: flex; flex-direction: column; padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .auth__main { padding: 28px 48px 40px; } }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.auth__top .logo { color: var(--ink); }
@media (min-width: 1000px) { .auth__top .logo { visibility: hidden; } }
.auth__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-weight: 500; font-size: 14px; transition: color .25s; }
.auth__back:hover { color: var(--ink); }
.auth__back svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.auth__back:hover svg { transform: translateX(-3px); }
.auth__box { width: 100%; max-width: 440px; margin: 0 auto; padding: 24px 0 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .auth__box { padding-top: 40px; } }
/* entrada: título, subtítulo e abas sobem em sequência */
.auth__box > * { animation: up .9s var(--ease) backwards; }
.auth__box > :nth-child(2) { animation-delay: .06s; } .auth__box > :nth-child(3) { animation-delay: .12s; } .auth__box > .secure { animation-delay: .3s; }
.auth h1 { font-size: clamp(28px, 7.4vw, 34px); margin-bottom: 8px; }
.auth__sub { color: var(--muted); margin: 0 0 24px; }
@media (min-width: 768px) { .auth__sub { margin-bottom: 28px; } }
.tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 24px; }
.tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 11px 4px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; transition: color .3s; }
.tabs button.is-on { color: var(--ink); }
.tabs__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 9px; background: #fff; box-shadow: var(--shadow-s), 0 0 0 1px var(--line); transition: transform .5s var(--ease); }
.panel { display: none; }
.panel.is-on { display: block; animation: panelIn .5s var(--ease) backwards; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.field { position: relative; margin-bottom: 16px; }
.field > span { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid #d3dae6; outline: none; background: #fff;
  font-size: 16px; color: var(--ink); transition: border-color .25s, box-shadow .25s var(--ease);
}
.field input::placeholder { color: #a3acbf; }
.field input:hover { border-color: #b9c3d5; }
.field input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(31,102,229,.12); }
.field.is-bad input { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(209,58,74,.08); }
.field__err { display: none; margin: 6px 0 0; color: var(--danger); font-size: 13px; }
.field.is-bad .field__err { display: block; animation: panelIn .35s var(--ease) backwards; }
.field__wrap { position: relative; }
.field__wrap input { padding-right: 52px; }
.field__eye { position: absolute; right: 4px; top: 4px; width: 42px; height: 42px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .2s, background-color .2s; }
.field__eye:hover { color: var(--ink); background: var(--bg-soft); }
.field__eye svg { width: 18px; height: 18px; }
.row2 { display: grid; gap: 0 12px; }
@media (min-width: 480px) { .row2 { grid-template-columns: 1fr 1fr; } }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: -6px 0 6px; }
.meter i { height: 4px; border-radius: 4px; background: var(--line); transition: background-color .4s var(--ease); }
.meter[data-s='1'] i:nth-child(-n+1) { background: var(--danger); }
.meter[data-s='2'] i:nth-child(-n+2) { background: var(--warn); }
.meter[data-s='3'] i:nth-child(-n+3) { background: var(--brand-500); }
.meter[data-s='4'] i { background: var(--ok); }
.meter__txt { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; min-height: 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin-top: 2px; }
.check a { color: var(--brand); font-weight: 500; }
.linkrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin: 0 0 20px; font-size: 14px; }
.linkrow .check { margin: 0; }
.linkrow a { color: var(--brand); font-weight: 600; }
.or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stepper { display: flex; justify-content: space-between; margin-bottom: 24px; font-size: 12px; color: var(--muted); font-weight: 500; }
@media (min-width: 480px) { .stepper { font-size: 12.5px; } }
.stepper span { position: relative; flex: 1; min-width: 0; padding-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
/* barra de cada etapa: o azul cresce da esquerda quando a etapa é atingida */
.stepper span::before, .stepper span::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line); }
.stepper span::after { background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease); }
.stepper span + span { margin-left: 6px; }
.stepper span.on { color: var(--ink); }
.stepper span.on::after { transform: none; }
.sstep { display: none; }
.sstep.is-on { display: block; animation: panelIn .5s var(--ease) backwards; }
.btnrow { display: flex; gap: 10px; }
.btnrow .btn:last-child { flex: 1; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); margin-bottom: 22px; font-size: 14px; }
.note svg { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 1px; }
.note b { color: var(--ink); }
.note p { margin: 2px 0 0; color: var(--muted); }
.dlist { display: grid; gap: 10px; }
.dlrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); }
@media (hover: hover) { .dlrow:hover { border-color: #c4cee0; box-shadow: var(--shadow-s); } }
.dlrow:active { transform: scale(.99); }
.dlrow .appc__ic { width: 42px; height: 42px; border-radius: 10px; margin: 0; flex: none; }
.dlrow .appc__ic svg { width: 20px; height: 20px; }
.dlrow div { flex: 1; line-height: 1.35; }
.dlrow b { display: block; color: var(--ink); font-size: 15px; }
.dlrow small { color: var(--muted); font-size: 13px; }
.dlrow > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.success { text-align: center; padding: 8px 0; }
.success__ic { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-50); animation: successIn .7s var(--ease) backwards; }
@keyframes successIn { from { transform: scale(.5); opacity: 0; } }
.success__ic svg { width: 30px; height: 30px; color: var(--ok); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .25s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h2 { font-size: 24px; margin-bottom: 8px; }
.success p { color: var(--muted); margin: 0 0 24px; }
.secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; font-size: 12.5px; color: var(--muted); text-align: center; }
.secure svg { width: 14px; height: 14px; color: var(--ok); flex: none; }
.tabs[hidden] { display: none; }
.formerr { display: none; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 18px; border-radius: 12px; background: #fdf1f2; border: 1px solid #f6cdd2; color: #a8293a; font-size: 14px; font-weight: 500; }
.formerr::before { content: '!'; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.formerr.is-on { display: flex; animation: panelIn .4s var(--ease) backwards; }
.note--link { color: inherit; text-decoration: none; transition: border-color .25s, box-shadow .25s var(--ease); }
@media (hover: hover) { .note--link:hover { border-color: var(--brand-500); box-shadow: var(--shadow-s); } }
.staff-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); transition: color .2s; }
.staff-link:hover { color: var(--brand); }
.staff-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; margin-bottom: 20px; border-radius: 999px; background: #0b1b3a; color: #dce7ff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.staff-badge svg { width: 16px; height: 16px; color: #7fb0ff; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Efeitos (camada 2)
   ========================================================= */

/* barra de progresso da leitura */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-500), #8fb6ff); pointer-events: none; }

/* aurora: manchas de luz azul que se movem devagar atrás da rede
   (gradientes já suaves: sem blur nem blend, para não pesar no celular) */
.aurora { position: absolute; inset: -20%; pointer-events: none; opacity: .7; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 48%; top: 0%; background: radial-gradient(circle, rgba(31,102,229,.45), transparent 65%); animation: drift1 20s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; left: 8%; top: 40%; background: radial-gradient(circle, rgba(11,69,165,.5), transparent 65%); animation: drift2 24s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 62%; top: 52%; background: radial-gradient(circle, rgba(110,160,255,.28), transparent 65%); animation: drift3 18s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-14vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(16vw, -12vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-10vw, -16vh) scale(1.25); } }
@media (max-width: 760px) { .aurora i { width: 90vw !important; height: 90vw !important; } }

/* faixa de benefícios rolando */
.ticker { position: relative; overflow: hidden; background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.06); padding: 16px 0; }
@media (min-width: 768px) { .ticker { padding: 18px 0; } }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy-950), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--navy-950), transparent); }
.ticker__track { display: flex; width: max-content; animation: tick 50s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; color: rgba(226,234,250,.72); font-size: 14px; font-weight: 500; white-space: nowrap; }
.ticker span::after { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--brand-500); transform: rotate(45deg); }
@keyframes tick { to { transform: translateX(-50%); } }

/* cartões com borda de luz que segue o mouse (só com mouse) */
.glow-card { position: relative; isolation: isolate; }
.glow-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(31,102,229,.8), rgba(143,182,255,.3) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glow-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(31,102,229,.05), transparent 60%); }
.glow-card:hover::before, .glow-card:hover::after { opacity: 1; }
.sec .glow-card::before { inset: 0; }

/* botões: reflexo que atravessa no hover */
.btn--primary, .btn--white { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--white::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); transition: left .8s var(--ease); }
.btn--white::after { background: linear-gradient(100deg, transparent, rgba(31,102,229,.14), transparent); }
@media (hover: hover) { .btn--primary:hover::after, .btn--white:hover::after { left: 120%; } }

/* número que pulsa de leve quando o valor da parcela muda */
.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.04); color: var(--brand-500); } }