/* ==========================================================================
   SITE — a página que fala com quem ainda não é cliente.

   Segue a mesma ideia do sistema de referência: não existe "cinza" aqui.
   Existe BRANCO COM ALFA em degraus fixos sobre um chão tingido. Superfície
   e tinta correm em duas escadas paralelas, e nada fora delas é permitido.

     SUPERFÍCIE                TINTA
     --n-1  2,8%  painel       --t-1  95%  título, número
     --n-2  6,2%  cartão       --t-2  62%  texto
     --n-3   10%  peça, ativo  --t-3  48%  meta, contexto
     --n-4   16%  régua        --t-4  32%  divisória, apagado

   Sobre fundo escuro o alfa EMPILHA: um cartão de 6,2% dentro de um painel
   de 2,8% dá 9%, e a profundidade nasce sozinha, sem uma borda sequer.

   UMA cor, e ela é a AÇÃO. O mesmo azul do sistema por dentro — quem entra
   pelo site e loga não pode ver duas marcas em dois cliques.
   ========================================================================== */

:root {
    color-scheme: dark;
    --pedra:  #070a0c;
    --n-1: rgba(255,255,255,.028);
    --n-2: rgba(255,255,255,.062);
    --n-3: rgba(255,255,255,.10);
    --n-4: rgba(255,255,255,.16);
    --t-1: rgba(255,255,255,.95);
    --t-2: rgba(255,255,255,.62);
    --t-3: rgba(255,255,255,.48);
    --t-4: rgba(255,255,255,.32);
    --acao:     #ffffff;   /* a acao nao tem cor: no escuro ela e' a unica massa opaca */
    --acao-txt: #070a0c;
    --alarme:   #c9575c;

    --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
    --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px;
    --r-md:8px; --r-lg:14px; --r-full:999px;
    --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
    --fs-16:16px; --fs-18:18px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --pedra: #fafafa;
    --n-1: #ffffff;
    --n-2: #f1f2f4;
    --n-3: #e4e6e9;
    --n-4: #d3d6da;
    --t-1: #2f3437;
    --t-2: #4f575d;
    --t-3: #6b7378;
    --t-4: #949b9f;
    --acao:     #1d5c7a;   /* no claro, o petroleo */
    --acao-txt: #eaf2f5;
    --alarme:   #c2352b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pedra);
    color: var(--t-1);
    font: var(--fs-14)/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* --- cabeçalho que acompanha a rolagem ---------------------------------- */
.nav { position: sticky; top: 0; z-index: 40;
       background: color-mix(in srgb, var(--pedra) 86%, transparent);
       backdrop-filter: blur(12px); border-bottom: 1px solid var(--n-2); }
.nav-in { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-5);
          height: 60px; display: flex; align-items: center; gap: var(--s-6); }
.nav-brand { display: flex; align-items: center; gap: 9px;
             font-size: var(--fs-16); font-weight: 600; letter-spacing: -.01em; }
.nav-brand i { width: 7px; height: 7px; border-radius: 50%; background: var(--t-1); }
.nav-links { display: flex; gap: var(--s-5); margin-left: var(--s-4); }
.nav-links a { font-size: var(--fs-13); color: var(--t-3); }
.nav-links a:hover { color: var(--t-1); }
.nav-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.nav-lang { display: flex; gap: 2px; }
.nav-lang a { font-size: var(--fs-11); font-weight: 600; color: var(--t-4);
              padding: 3px 7px; border-radius: 6px; }
.nav-lang a.on { background: var(--n-3); color: var(--t-1); }

/* --- botões -------------------------------------------------------------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
     padding: 10px 18px; border-radius: var(--r-md); font-size: var(--fs-13);
     font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.b-1 { background: var(--acao); color: var(--acao-txt); }
.b-1:hover { filter: brightness(.94); }
.b-2 { background: var(--n-2); color: var(--t-1); border-color: var(--n-3); }
.b-2:hover { background: var(--n-3); }
.b-sm { padding: 7px 13px; font-size: var(--fs-12); }

/* --- estrutura ----------------------------------------------------------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-5); }
.sec { padding: var(--s-14) 0; }
.sec-tag { font-size: var(--fs-11); font-weight: 500; letter-spacing: .09em;
           text-transform: uppercase; color: var(--t-4); }
.sec-h { margin: var(--s-3) 0 0; font-size: clamp(22px, 3vw, 30px); font-weight: 600;
         letter-spacing: -.02em; line-height: 1.2; }
.sec-p { margin-top: var(--s-4); font-size: var(--fs-14); line-height: 1.65;
         color: var(--t-2); max-width: 48ch; }

/* --- hero ---------------------------------------------------------------- */
.hero { padding: var(--s-14) 0 var(--s-10); text-align: center; }
.hero h1 { font-size: clamp(30px, 5.2vw, 52px); font-weight: 600; line-height: 1.08;
           letter-spacing: -.035em; max-width: 17ch; margin: 0 auto; }
.hero-p { margin: var(--s-5) auto 0; max-width: 56ch; font-size: var(--fs-16);
          line-height: 1.6; color: var(--t-2); }
.hero-acoes { margin-top: var(--s-8); display: flex; gap: var(--s-3); justify-content: center; }

/* --- faixa de números ---------------------------------------------------- */
.faixa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
         background: var(--n-2); border: 1px solid var(--n-2); border-radius: var(--r-lg);
         overflow: hidden; }
.faixa div { background: var(--pedra); padding: var(--s-6) var(--s-5); }
.faixa b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.faixa span { display: block; margin-top: 3px; font-size: var(--fs-12); color: var(--t-3); }

/* --- recurso: texto de um lado, print do outro --------------------------- */
.duo { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
       gap: var(--s-10); align-items: center; }
.duo.inv > *:first-child { order: 2; }
.duo-lista { margin-top: var(--s-5); display: flex; flex-direction: column; gap: 10px; }
.duo-li { display: flex; gap: 9px; font-size: var(--fs-13); line-height: 1.5; color: var(--t-2); }
.duo-li i { flex: none; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%;
            background: var(--acao); color: #fff; font-style: normal; font-size: 9px;
            display: grid; place-items: center; }

/* ==========================================================================
   OS "PRINTS" — HTML, não imagem. Usam os mesmos degraus da escada,
   então nunca mostram uma tela que não existe mais.
   ========================================================================== */
.shot { border: 1px solid var(--n-3); border-radius: var(--r-lg); background: var(--n-1);
        overflow: hidden; box-shadow: 0 18px 50px -20px rgba(0,0,0,.7); }
.shot-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
            background: var(--n-2); border-bottom: 1px solid var(--n-2); }
.shot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n-4); }
.shot-url { margin-left: 10px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
            color: var(--t-4); }
.shot-body { padding: var(--s-5); }
.shot-h { font-size: var(--fs-12); font-weight: 600; }
.shot-sub { margin-top: 2px; font-size: 10px; color: var(--t-4); }

.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.mk-kpi { padding: 11px; background: var(--n-2); border-radius: var(--r-md); }
.mk-kpi span { display: block; font-size: 9.5px; color: var(--t-3); }
.mk-kpi b { display: block; margin-top: 3px; font-size: var(--fs-16); letter-spacing: -.02em; }

.mk-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
          border-top: 1px solid var(--n-2); font-size: 11px; }
.mk-row:first-of-type { border-top: 0; }
.mk-row b { font-weight: 500; }
.mk-row .r { margin-left: auto; font-variant-numeric: tabular-nums; }
.mk-chip { padding: 2px 8px; border-radius: var(--r-full); background: var(--n-3);
           font-size: 9.5px; color: var(--t-2); }
.mk-chip.go { background: color-mix(in srgb, var(--acao) 26%, transparent); color: var(--t-1); }

.mk-steps { display: flex; gap: 0; margin-bottom: var(--s-4); }
.mk-step { flex: 1; text-align: center; position: relative; }
.mk-step::before { content: ''; position: absolute; left: 0; right: 0; top: 6px;
                   height: 2px; background: var(--n-3); }
.mk-step.on::before { background: var(--acao); }
.mk-step i { position: relative; display: block; width: 13px; height: 13px; margin: 0 auto 7px;
             border-radius: 50%; background: var(--n-3); }
.mk-step.on i { background: var(--acao); }
.mk-step span { font-size: 9px; color: var(--t-3); }
.mk-step em { display: block; font-style: normal; font-size: 8.5px; color: var(--t-4); }

.mk-doc { border: 1px solid var(--n-3); border-radius: var(--r-md); padding: var(--s-4); }
.mk-doc-h { display: flex; justify-content: space-between; align-items: flex-start;
            border-bottom: 1px solid var(--n-3); padding-bottom: 10px; margin-bottom: 10px; }
.mk-doc-h b { font-size: var(--fs-14); }
.mk-doc-h small { display: block; font: 9.5px ui-monospace, Menlo, monospace; color: var(--t-3); }
.mk-total { display: flex; justify-content: space-between; border-top: 1px solid var(--n-4);
            margin-top: 10px; padding-top: 10px; font-weight: 600; }

/* --- preços -------------------------------------------------------------- */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.plano { background: var(--n-1); border: 1px solid var(--n-2); border-radius: var(--r-lg);
         padding: var(--s-6); display: flex; flex-direction: column; }
.plano.dest { border-color: var(--acao); }
.plano h3 { margin: 0; font-size: var(--fs-14); font-weight: 600; }
.plano .preco { margin: var(--s-4) 0 var(--s-2); font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.plano .preco small { font-size: var(--fs-12); font-weight: 400; color: var(--t-3); letter-spacing: 0; }
.plano ul { list-style: none; margin: var(--s-4) 0 var(--s-6); padding: 0;
            display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-13); color: var(--t-2); }
.plano ul li::before { content: '· '; color: var(--t-4); }
.plano .b { margin-top: auto; }

/* --- chamada final e rodapé ---------------------------------------------- */
.cta { text-align: center; background: var(--n-1); border: 1px solid var(--n-2);
       border-radius: var(--r-lg); padding: var(--s-14) var(--s-5); }
.foot { border-top: 1px solid var(--n-2); padding: var(--s-8) 0; margin-top: var(--s-10);
        font-size: var(--fs-12); color: var(--t-4); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.foot .r { margin-left: auto; }

@media (max-width: 860px) {
    .duo { grid-template-columns: 1fr; gap: var(--s-8); }
    .duo.inv > *:first-child { order: 0; }
    .faixa, .planos { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .mk-kpis { grid-template-columns: repeat(2, 1fr); }
}