/* =========================================================
   Páginas públicas (landing, cursos, planos) na linha "Vidro", a mesma do app (22/10).
   Carrega depois de v2/site.css. Claro e escuro seguem o aparelho.
   Sem ondas, sem roxo, sem emoji; azul = ação; a Foca só com as poses oficiais.
   ========================================================= */
:root {
  --bg: #eef1f6; --bg-2: rgb(255 255 255 / .5); --card: rgb(255 255 255 / .74); --card-2: rgb(13 26 51 / .04);
  --t: #0d1a33; --t2: #3d4860; --t3: #69738a;
  --l: rgb(13 26 51 / .08); --l2: rgb(13 26 51 / .14); --hover: rgb(13 26 51 / .05);
  --navy: #0b2556; --navy-2: #2356f6; --link: #2356f6;
  --teal: #14bfae; --teal-d: #0f9f91; --teal-bg: rgb(20 191 174 / .1);
  --marca-claro: rgb(35 86 246 / .08); --ouro: #8a5a00;
  --acao: #2356f6; --acao-2: #4b78ff; --acao-claro: rgb(35 86 246 / .09);
  --vidro: linear-gradient(180deg, rgb(255 255 255 / .78), rgb(255 255 255 / .55));
  --borda: rgb(255 255 255 / .85); --brilho: rgb(255 255 255 / .9);
  --sombra: 0 1px 2px rgb(13 26 51 / .05), 0 14px 34px -20px rgb(13 26 51 / .3);
  --sombra-g: 0 30px 60px -28px rgb(13 26 51 / .4);
  --fundo:
    radial-gradient(60vmax 45vmax at 0% 0%, rgb(64 110 255 / .2), transparent 70%),
    radial-gradient(45vmax 40vmax at 100% 30%, rgb(20 191 174 / .12), transparent 70%),
    linear-gradient(180deg, #f6f7fa, #eef1f6);
  --sans: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05070b; --bg-2: rgb(255 255 255 / .03); --card: rgb(255 255 255 / .06); --card-2: rgb(255 255 255 / .05);
    --t: #f2f4f7; --t2: #b9c0cc; --t3: #8a93a2;
    --l: rgb(255 255 255 / .08); --l2: rgb(255 255 255 / .14); --hover: rgb(255 255 255 / .06);
    --navy: #e8edf7; --navy-2: #8fb0ff; --link: #8fb0ff;
    --teal-d: #5ee3d2; --teal-bg: rgb(58 217 198 / .12); --marca-claro: rgb(106 146 255 / .12); --ouro: #e2b355;
    --acao: #4f7dff; --acao-2: #6a92ff; --acao-claro: rgb(106 146 255 / .14);
    --vidro: linear-gradient(180deg, rgb(255 255 255 / .075), rgb(255 255 255 / .025));
    --borda: rgb(255 255 255 / .1); --brilho: rgb(255 255 255 / .14);
    --sombra: 0 18px 40px -22px rgb(0 0 0 / .9);
    --sombra-g: 0 30px 60px -24px rgb(0 0 0 / .95);
    --fundo:
      radial-gradient(70vmax 40vmax at 10% -10%, rgb(64 110 255 / .22), transparent 70%),
      radial-gradient(40vmax 30vmax at 100% 40%, rgb(30 170 160 / .06), transparent 70%),
      linear-gradient(180deg, #182230 0, #0b1018 70vh, #05070b 100%);
    color-scheme: dark;
  }
}

/* base */
html { background: var(--bg); }
body { background: none; font-family: var(--sans); letter-spacing: -.004em; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--fundo); }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; }
::selection { background: var(--acao-claro); }
.grad { color: var(--acao); }

/* topo: vidro */
.topo { background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--l); }
.logo { font-weight: 700; letter-spacing: -.03em; }
.logo b { color: var(--teal-d); }
.menu a { border-radius: 999px; }

/* botões em pílula; o principal é o azul da marca */
.btn, .btn.brilho, .final .btn, .plano.top .btn { border-radius: 999px; font-weight: 600; color: #fff; border: 0;
  background: linear-gradient(180deg, var(--acao-2), var(--acao)); box-shadow: 0 10px 22px -12px var(--acao), inset 0 1px 0 rgb(255 255 255 / .3); }
.btn:hover, .final .btn:hover, .plano.top .btn:hover { background: linear-gradient(180deg, var(--acao-2), var(--acao)); filter: brightness(1.06); }
.menu a.btn { color: #fff; }
.btn.vidro, .btn.contorno { background: var(--vidro); color: var(--t); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.btn.vidro:hover, .btn.contorno:hover { background: var(--vidro); filter: none; border-color: var(--l2); }
@media (prefers-color-scheme: dark) { .btn, .menu a.btn, .final .btn, .plano.top .btn { color: #fff; } }

/* sem as ondas da marca antiga */
.hero .onda, .plano.top::after, .final::after, .rodape::before, .topo-pag::after { display: none !important; }

/* hero */
.hero { background: none; padding-bottom: 80px; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -.045em; }
.mascote { width: 190px; right: -24px; top: -70px; filter: drop-shadow(0 18px 22px rgb(13 26 51 / .22)); }
.tela { border-radius: 24px; background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--sombra-g), inset 0 1px 0 var(--brilho); }
.tela-topo { border-bottom-color: var(--l); }
.tela-topo img { border-radius: 50%; background: linear-gradient(160deg, #cfdcff, #9fb8ff); object-fit: cover; }
.tela-topo .on { color: var(--teal-d); }
.msg { border-radius: 18px; }
.msg.eu { background: var(--acao-claro); color: var(--t); border: 0; border-radius: 18px 18px 6px 18px; }
.atalhos span { border-radius: 999px; }
.flutua { border-radius: 16px; background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.flutua .em { border-radius: 50%; background: var(--acao-claro); color: var(--acao); }
.flutua.f2 .em { background: rgb(249 115 22 / .12); color: #ea580c; }

/* seções */
.secao.alt { background: none; border-block: 0; }
.peca, .plano, .tabela-wrap, .chips a, .chips-num li, .cartao3d, .demo, .documento, .faixa {
  border-radius: 24px; background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 1px 0 var(--brilho);
}
.mosaico { gap: 16px !important; }
.peca { padding: 24px !important; border-top: 1px solid var(--borda) !important; }
.peca:hover { border-color: var(--l2); }
.icone { border-radius: 14px; background: var(--acao-claro); color: var(--acao); }
.peca:hover .icone { background: var(--acao-claro); color: var(--acao); }
.chips a, .chips-num li { border-radius: 999px; }
.chips a:hover { border-color: var(--acao); color: var(--acao); }
.passos .n { background: var(--vidro) !important; color: var(--acao) !important; border: 1px solid var(--borda) !important; box-shadow: var(--sombra) !important; font-family: var(--sans) !important; font-weight: 700 !important; }
.passos::before { border-top-color: var(--l2); }

/* planos: o Premium em azul profundo, com luz */
.plano { border-radius: 28px; }
.plano li .ic { color: var(--acao); }
.plano.top { color: #fff; border: 0; background: radial-gradient(120% 80% at 100% 0%, rgb(106 146 255 / .55), transparent 60%), linear-gradient(160deg, #1f45c9, #0c1f5c); box-shadow: 0 34px 70px -30px rgb(31 69 201 / .75); padding-bottom: 30px; }
.plano.top .sub, .plano.top .preco span, .plano.top .preco-nota { color: rgb(255 255 255 / .72); }
.plano.top li .ic { color: #8ef0e2; }
.plano.top .btn { background: #fff; color: #1a3fb8; box-shadow: 0 10px 22px -12px rgb(0 0 0 / .5); }
.fita { border-radius: 999px; }
.tabela th { background: var(--card-2); }
.tabela td:last-child { color: var(--acao); }

/* chamada final */
.final { border-radius: 32px; color: #fff; background: radial-gradient(70% 90% at 80% 20%, rgb(64 110 255 / .55), transparent 70%), linear-gradient(160deg, #13203a, #070b14); box-shadow: var(--sombra-g); }
.final p { color: rgb(255 255 255 / .72); }
.final .btn.vidro { background: rgb(255 255 255 / .08); color: #fff; border: 1px solid rgb(255 255 255 / .2); box-shadow: none; }
.final img { width: 220px; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .4)); }

/* perguntas */
.perguntas details { border-color: var(--l) !important; }

/* rodapé */
.rodape { background: #070b12; padding-top: 64px; }
.rodape .logo b { color: #5ee3d2; }

/* páginas internas (cursos) */
.topo-pag { background: none; padding-bottom: 48px; }
.topo-pag h1 { color: var(--t); }

/* botões lisos (como nas referências): cor chapada, sem degradê, sem reflexo, sem sombra que brilha */
:root { --botao: #1f4fe0; --botao-hover: #1a43c4; --sec-fundo: rgb(13 26 51 / .06); --sec-hover: rgb(13 26 51 / .1); }
@media (prefers-color-scheme: dark) { :root { --botao: #3d6cf2; --botao-hover: #5079f4; --sec-fundo: rgb(255 255 255 / .08); --sec-hover: rgb(255 255 255 / .12); } }
.btn, .btn.brilho, .final .btn, .menu a.btn { background: var(--botao) !important; box-shadow: none !important; filter: none !important; border: 0 !important; color: #fff !important; }
.btn:hover, .btn.brilho:hover, .final .btn:hover, .menu a.btn:hover { background: var(--botao-hover) !important; }
.btn.vidro, .btn.contorno { background: var(--sec-fundo) !important; color: var(--t) !important; border: 0 !important; box-shadow: none !important; }
.btn.vidro:hover, .btn.contorno:hover { background: var(--sec-hover) !important; }
.final .btn.vidro { background: rgb(255 255 255 / .1) !important; color: #fff !important; }
.plano.top .btn { background: #fff !important; color: #1a3fb8 !important; }
.plano.top .btn:hover { background: #eef2ff !important; }

/* números com largura natural (na Onest a largura fixa deixava vão depois do "1") */
body, body * { font-variant-numeric: proportional-nums !important; }