/* =====================================================================
   VELTO REFRESH 2026 — página inicial (index.html)
   Como usar: salve na mesma pasta do index.html e adicione
   <link rel="stylesheet" href="/velto-landing.css"> logo antes de </body>.
   - Fonte: Inter 4 pelo cdnjs (o Google Fonts é bloqueado pelo CSP) no texto;
     Plus Jakarta Sans (arquivo /velto-jakarta.woff2, do próprio site) na logo, títulos e números
   - Botões e textos verdes com contraste AA; mockup do app com o visual novo
   ===================================================================== */

/* ---------- 1. Fonte ---------- */
@font-face{font-family:'InterVariable';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-subset.woff2') format('woff2')}
/* fonte da marca: Plus Jakarta Sans, servida pelo próprio site (licença OFL) */
@font-face{font-family:'Velto Display';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/velto-jakarta.woff2') format('woff2')}
/* o CSS antigo pede Hanken Grotesk: o nome passa a apontar para a Inter */
@font-face{font-family:'Hanken Grotesk';font-weight:100 900;font-display:swap;
  src:url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.1/variable-latin/InterVariable-subset.woff2') format('woff2')}

/* ---------- 2. Tokens ---------- */
html:root{
  --v-font:'InterVariable','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mint-d:#0a8463;                      /* verde de texto (AA) */
  --v-ink-on-mint:#04261d;
  --grad:linear-gradient(135deg,#3ad0a3 0%,#16b489 100%);
  --v-grad-deep:linear-gradient(135deg,#17ad85 0%,#0a8463 100%);
  --line:#e4e9ed; --bg2:#f5f7f8; --mut:#5f6d78; --red:#cf3a4e;
}
:root body,:root body *{font-family:var(--v-font) !important}
:root body{letter-spacing:-.006em;font-variant-numeric:tabular-nums}
:root h1,:root h2,:root h3{letter-spacing:-.03em}
:root .hero h1{letter-spacing:-.04em;font-weight:800}
:root .sec-head h2{letter-spacing:-.035em}
/* logo escrita, títulos e números grandes na fonte da marca */
html:root{--v-font-display:'Velto Display','InterVariable','Inter',system-ui,sans-serif}
:root body h1,:root body h2,:root body .brand-word,:root body .price,:root body .n,
:root body #pane-painel > div:first-child > span:last-child,:root body .kpis .kpi .v,:root body .donut-wrap .v{
  font-family:var(--v-font-display) !important}
:root body h1,:root body h2{letter-spacing:-.035em}
:root body .hero h1{letter-spacing:-.04em}
:root body .brand-word{letter-spacing:-.03em}

/* ---------- 3. Botões e destaques ---------- */
:root .btn{font-weight:650;letter-spacing:-.01em}
:root .btn-primary{background:var(--grad);color:var(--v-ink-on-mint);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(4,38,29,.16),0 12px 28px -12px rgba(22,180,137,.7)}
:root .btn-ghost:hover{border-color:color-mix(in srgb,var(--mint) 55%,var(--line))}
:root .plan-toggle button.on{background:var(--grad);color:var(--v-ink-on-mint)}
:root .feat .ic{background:var(--v-grad-deep)}
:root .eyebrow{color:#087a5b;font-weight:750}
:root .step-num{color:#0a7f60}
:root .faq-ic{color:#0a7f60}
:root .faq-item[open] .faq-ic{background:var(--v-grad-deep);color:#fff}
:root .plan .trial-tag{color:var(--mint-d)}
:root #installBtn{background:#0c1f2c !important;color:#fff !important;font-weight:600 !important;
  box-shadow:0 10px 26px -10px rgba(12,31,44,.55) !important;border:1px solid rgba(154,245,212,.18) !important}
:root #installBtn svg{color:#6ee7c0}

/* logo do rodapé: o SVG não tinha tamanho e sumia */
:root footer .velto-mark{width:28px;height:28px;flex:none}

/* ---------- 4. Mockup do app (mesmo visual do app novo) ---------- */
/* o mockup herdava o centralizado do hero: textos e lançamentos ficavam soltos no meio */
:root .frame{text-align:left}
:root .frame-tabs button{font-weight:600;letter-spacing:-.01em}
:root .frame-tabs button.on{box-shadow:0 1px 2px rgba(12,31,44,.1)}
/* card de saldo marinho + menta */
:root #pane-painel > div:first-child{flex-direction:column;align-items:flex-start !important;gap:4px;margin:0 !important;
  padding:18px 20px 12px;border-radius:16px 16px 0 0;color:#fff;
  background:radial-gradient(120% 160% at 100% 0%,rgba(22,180,137,.32) 0%,rgba(22,180,137,0) 55%),#0f2433}
:root #pane-painel > div:first-child > span:first-child{font-size:11px !important;font-weight:600 !important;letter-spacing:.1em;text-transform:uppercase;color:#8fa6b1}
:root #pane-painel > div:first-child > span:last-child{font-size:22px !important;font-weight:650 !important;letter-spacing:-.03em;color:#fff}
:root #pane-painel > .acct-row{padding:11px 20px;margin:0;background:#0f2433;border-color:rgba(255,255,255,.08);color:#d5e2e7;--red:#ff9aa5}
:root #pane-painel > .acct-row:first-of-type{border-top:1px solid rgba(255,255,255,.08)}
:root #pane-painel > .acct-row .mut{color:#c2d2d9}
:root #pane-painel > .acct-row > span:last-child{color:#6ee7c0}
:root #pane-painel > .acct-row > span:last-child[style*="--red"]{color:#ff9aa5 !important}
:root #pane-painel > .acct-row:has(+ .kpis){border-radius:0 0 16px 16px;border-bottom:none;padding-bottom:14px}
/* KPIs: bolinha colorida no lugar da borda lateral */
:root .kpis .kpi{border:1px solid var(--line) !important;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04)}
:root .kpis .kpi .l{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:-.005em;font-size:12px;font-weight:550;color:var(--ink2)}
:root .kpis .kpi .l::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:#2a67c9;box-shadow:0 0 0 3px rgba(42,103,201,.15)}
:root .kpis .kpi:nth-child(2) .l::before{background:#cf3a4e;box-shadow:0 0 0 3px rgba(207,58,78,.15)}
:root .kpis .kpi:nth-child(3) .l::before{background:#16b489;box-shadow:0 0 0 3px rgba(22,180,137,.18)}
:root .kpis .kpi .v{font-weight:700;letter-spacing:-.03em}
:root .kpi .bar,:root .pote-bar{background:#edf1f4}
:root .chart-card,:root .card-soft{border-radius:16px}
:root .donut-wrap svg circle{stroke-width:12px}
:root .donut-wrap svg circle:first-child{stroke:#edf1f4}
:root .leg-row .nm{text-align:left}
:root .leg-row .val{text-align:right}
/* ícones de categoria: traço mais escuro que o fundo (contraste 3:1) */
:root .cico{color:color-mix(in oklab,var(--ic) 72%,#0e1a24)}
/* paleta de categorias Velto 2026 (a mesma proposta para o app) */
html:root{--cat-ambar:#e19005;--cat-verde:#36ac53;--cat-azul:#2879dc;--cat-rosa:#e0608a;--cat-roxo:#9c5ecd;--cat-ciano:#26afb6;
  --cat-coral:#df695c;--cat-lima:#84ac1c;--cat-ouro:#d3c023;--cat-indigo:#6455ce;--cat-ceu:#2193ce;--cat-vermelho:#d33949;
  --cat-laranja:#ea6a12;--cat-menta:#16b489;--cat-magenta:#b63590;--cat-grafite:#76818f}
:root .donut-wrap circle[stroke="#6ee7a8"]{stroke:var(--cat-menta)}
:root .donut-wrap circle[stroke="#74b4f2"]{stroke:var(--cat-azul)}
:root .donut-wrap circle[stroke="#eab464"]{stroke:var(--cat-indigo)}
:root .donut-wrap circle[stroke="#a8c97f"]{stroke:var(--cat-laranja)}
:root .donut-wrap circle[stroke="#dcc06a"]{stroke:var(--cat-ceu)}
:root .donut-wrap circle[stroke="#c9a3f0"]{stroke:var(--cat-magenta)}
:root .cico[style*="#6ee7a8"]{--ic:var(--cat-menta) !important}
:root .cico[style*="#74b4f2"]{--ic:var(--cat-azul) !important}
:root .cico[style*="#eab464"]{--ic:var(--cat-indigo) !important}
:root .cico[style*="#a8c97f"]{--ic:var(--cat-laranja) !important}
:root .cico[style*="#dcc06a"]{--ic:var(--cat-ceu) !important}
:root .cico[style*="#c9a3f0"]{--ic:var(--cat-magenta) !important}
/* cores dos potes iguais às do app */
:root .pote-dot[style*="#b8791f"],:root .pote-bar>span[style*="#b8791f"]{background:#c27c12 !important}
:root .pote-dot[style*="#2f8f5b"],:root .pote-bar>span[style*="#2f8f5b"]{background:#12a57d !important}
:root .pote-dot[style*="#2f6fb0"],:root .pote-bar>span[style*="#2f6fb0"]{background:#2f6fd6 !important}
:root .pote-dot[style*="#c95992"],:root .pote-bar>span[style*="#c95992"]{background:#c64f90 !important}
/* lançamentos no estilo extrato, como no app */
:root .tx-head{display:none}
:root .tx-day{padding:16px 6px 6px;font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
:root .tx-row{position:relative;grid-template-columns:minmax(0,1fr) auto 34px;grid-template-areas:"desc amt menu" "cat amt menu";
  column-gap:12px;padding:9px 4px 9px 58px;border-bottom:none !important;border-radius:12px}
:root .tx-row:hover{background:var(--bg2)}
:root .tx-desc{grid-area:desc;display:block !important;font-size:14.5px;font-weight:600;color:var(--ink)}
:root .tx-cat{grid-area:cat;font-size:12px;font-weight:500;color:var(--mut);gap:0 6px;flex-wrap:wrap}
:root .tx-cat .sub{display:inline;margin:0;font-size:12px}
:root .tx-cat .sub::before{content:"·";margin-right:6px}
:root .tx-cat .cico{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:12px}
:root .tx-cat .cico svg{width:17px;height:17px}
:root .tx-val{grid-area:amt;font-weight:650}
:root .tx-val.neg{color:var(--ink)}
:root .tx-val.pos{color:var(--mint-d)}
:root .tx-menu{grid-area:menu}
:root .kebab{border-color:transparent;background:transparent}

/* ---------- 5. Celular ---------- */
@media (max-width:520px){
  :root .frame-body > [id^="pane-"]{padding:14px 12px}
  /* potes: valor desce para a linha de baixo em vez de quebrar o nome */
  :root .pote-top{flex-wrap:wrap;row-gap:2px}
  :root .pote-top .nm{flex:1 1 auto}
  :root .pote-top .nm small{white-space:nowrap}
  :root .pote-top .amt{flex:1 0 100%;padding-left:17px;font-weight:550}
  /* lançamentos: categoria e conta numa linha só */
  :root .tx-row{grid-template-columns:minmax(0,1fr) auto 26px;column-gap:8px;padding-left:52px}
  :root .tx-cat{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root .tx-cat .sub{margin-left:5px}
  :root .tx-cat .cico{left:6px;width:34px;height:34px;border-radius:11px}
  :root .tx-desc{font-size:14px}
}