/* ---------------------------------------------------------------------------
   A ARTE DAS FERRAMENTAS DO ESCRITÓRIO.
   ---------------------------------------------------------------------------

   Esta folha é a MESMA arte do simulador de verbas, tirada de dentro do
   `index.html` dele e posta em arquivo próprio para as quatro ferramentas
   dividirem.

   POR QUE UM ARQUIVO SÓ

   Quem clica no anúncio do raio-x e depois abre a calculadora precisa sentir
   que está na mesma casa. Com quatro folhas separadas, uma correção de cor
   entra em três e esquece a quarta, e a diferença aparece justamente para quem
   percorreu mais de uma isca, que é o lead mais interessado.

   A PALETA É A DO PDBOX. O ardósia e o azul acinzentado já eram os do sistema:
   o anúncio nasceu da marca, não de um rebranding.

   O que cada ferramenta acrescenta são apenas os blocos do resultado dela, no
   fim deste arquivo: o medidor de vínculo, o veredito e a lista de achados.
   --------------------------------------------------------------------------- */

:root{
  --marca:#485d6e; --marca2:#5c7387; --mono:#8898a8;
  --ardosia:#2e3b47; --ardosia2:#3b4e5d;
  --bg:#f4f7f9; --card:#fff; --texto:#2e3b47; --fraco:#6b7c8c;
  --borda:#dce3e9; --borda-suave:#eef2f6;
  --ok:#2f6b4a; --alerta:#a8552f; --destaque:#b7791f;

  /* A ESCALA DE SINAL, uma vez só.
     Vermelho, laranja, amarelo e verde aparecem no medidor do vínculo, no
     veredito da rescisão e na gravidade dos achados do raio-x. Definidos aqui,
     as três ferramentas dizem "grave" com a mesma cor. */
  --sinal-1:#b42318; --sinal-2:#c2410c; --sinal-3:#b7791f; --sinal-4:#2f6b4a;

  --sombra:0 1px 2px rgba(46,59,71,.04), 0 12px 32px -22px rgba(46,59,71,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texto);
     font:16px/1.6 'Be Vietnam Pro',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     -webkit-font-smoothing:antialiased;
     padding:0 0 env(safe-area-inset-bottom)}

/* ---------- A entrada ---------- */
.capa{background:var(--ardosia);color:#fff;
      padding:calc(env(safe-area-inset-top) + 26px) 20px 30px;
      position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;right:-40px;bottom:-46px;width:230px;height:230px;
             background:url("assets/logo-branco.png") right bottom/contain no-repeat;
             opacity:.05;pointer-events:none}
.capa-topo{display:flex;align-items:center;max-width:640px;margin:0 auto 18px}
.capa-topo img{height:38px;width:auto;display:block}
.capa-corpo{max-width:640px;margin:0 auto;position:relative;z-index:1}
.pilula{display:inline-block;border:1px solid rgba(255,255,255,.28);border-radius:99px;
        padding:6px 15px;font-size:10.5px;font-weight:600;letter-spacing:.17em;
        text-transform:uppercase;color:#e8edf2}
h1{font-family:'Newsreader',Georgia,serif;font-weight:500;
   font-size:clamp(30px,8.4vw,44px);line-height:1.06;letter-spacing:-.015em;
   margin:16px 0 0;text-wrap:balance}
h1 i{display:block;font-style:italic;color:var(--mono);font-weight:400}
.risco{width:64px;height:1px;background:rgba(255,255,255,.3);margin:22px 0 16px}
.capa p{margin:0;color:#d5dde4;font-size:15px;max-width:34em}

/* ---------- O miolo ---------- */
.wrap{max-width:640px;margin:0 auto;padding:0 16px 40px}
.card{background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:22px 20px;
      box-shadow:var(--sombra);margin-top:-18px;position:relative;z-index:2}
.barra{height:3px;background:var(--borda-suave);border-radius:99px;overflow:hidden;margin:0 0 20px}
.barra i{display:block;height:100%;background:var(--marca);transition:width .25s}

h2{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:23px;line-height:1.2;
   margin:0 0 5px;letter-spacing:-.01em;text-wrap:balance}
.ajuda{color:var(--fraco);font-size:14px;margin:0 0 18px}

.opcoes{display:grid;gap:9px}
.opcao{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
       background:var(--card);border:1.5px solid var(--borda);border-radius:12px;padding:14px;
       font:inherit;color:inherit;transition:border-color .12s,background .12s}
.opcao:hover{border-color:var(--marca2)}
.opcao:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.opcao[aria-pressed="true"]{border-color:var(--marca);background:var(--borda-suave)}
.opcao b{font-weight:600;display:block}
.opcao small{color:var(--fraco);font-size:12.5px}

input[type=date],input[type=number],input[type=text],input[type=email],input[type=tel]{
  width:100%;padding:14px 13px;border:1.5px solid var(--borda);border-radius:12px;
  font:inherit;background:#fff;color:inherit}
input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(72,93,110,.11)}
.campos{display:grid;gap:14px}
.campo-label{display:grid;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.campo-label input{font-weight:400}
.erro-campo{min-height:20px;margin:8px 0 0;color:#b42318;font-size:12.5px}
.identificacao-resultado{margin:14px 0 4px;padding:11px 13px;border-radius:10px;
                        background:var(--bg);color:var(--fraco);font-size:12.5px}

.linha{display:flex;gap:10px;margin-top:20px}
.btn{flex:1;padding:15px 16px;border-radius:12px;border:0;font:inherit;font-weight:600;
     cursor:pointer;transition:background .12s}
.btn-1{background:var(--ardosia);color:#fff}
.btn-1:hover:not(:disabled){background:var(--ardosia2)}
.btn-1:disabled{opacity:.4;cursor:not-allowed}
.btn-2{background:transparent;color:var(--fraco);border:1.5px solid var(--borda);
       flex:0 0 auto;padding:15px 18px}

.grande{font-family:'Newsreader',Georgia,serif;font-size:38px;font-weight:600;
        letter-spacing:-.02em;margin:2px 0;font-variant-numeric:tabular-nums}
.verde{color:var(--ok)} .laranja{color:var(--alerta)}
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
td{padding:10px 0;border-bottom:1px solid var(--borda-suave);vertical-align:top}
td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.expl{display:block;color:var(--fraco);font-size:12px;margin-top:2px}
.grupo{margin-top:22px}
.grupo h3{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--fraco);
          font-weight:600;margin:0 0 4px}
.aviso{background:#fdf6ec;border:1px solid #f0dcc0;border-radius:12px;padding:14px;
       font-size:12.5px;color:#7c5a1e;margin-top:18px;line-height:1.55}

.provas{display:flex;gap:10px;margin:18px 0 0}
.prova{flex:1;background:var(--card);border:1px solid var(--borda);border-radius:12px;
       padding:13px 14px}
.prova b{display:block;font-family:'Newsreader',Georgia,serif;font-size:20px;font-weight:600;
         line-height:1.1}
.prova span{display:block;color:var(--fraco);font-size:11.5px;line-height:1.35;margin-top:3px}

.rodape{color:var(--fraco);font-size:12px;margin-top:22px;line-height:1.65;text-align:center}
.rodape b{color:var(--texto)}
.rodape a{color:var(--marca);text-decoration:none;border-bottom:1px solid var(--borda)}

/* =========================================================================
   O RESULTADO DE CADA FERRAMENTA
   ========================================================================= */

/* ---------- O medidor do vínculo (sem carteira) ----------
   A porcentagem sozinha não diz nada a quem nunca leu a CLT. A faixa colorida
   embaixo é o que traduz: o marcador cai numa zona, e a zona tem nome. */
.medidor{margin:4px 0 2px}
.medidor .cifra{font-family:'Newsreader',Georgia,serif;font-size:56px;font-weight:600;
                line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.medidor .faixa{position:relative;height:10px;border-radius:99px;margin:16px 0 8px;
                background:linear-gradient(90deg,
                  var(--sinal-1) 0%, var(--sinal-1) 32%,
                  var(--sinal-2) 38%, var(--sinal-2) 52%,
                  var(--sinal-3) 58%, var(--sinal-3) 72%,
                  var(--sinal-4) 78%, var(--sinal-4) 100%)}
.medidor .marca{position:absolute;top:-5px;width:4px;height:20px;border-radius:99px;
                background:var(--texto);box-shadow:0 0 0 3px var(--card);
                transform:translateX(-2px)}
.medidor .escala{display:flex;justify-content:space-between;color:var(--fraco);
                 font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.medidor .escala span[aria-current="true"]{color:var(--texto)}

/* ---------- O veredito (rescisão indireta) ----------
   Uma tarja de cor à esquerda em vez de um fundo colorido inteiro: colorir o
   bloco todo grita, e o assunto aqui é sério. */
.veredito{border:1px solid var(--borda);border-left:4px solid var(--faixa,var(--marca));
          border-radius:12px;padding:16px 18px;background:var(--card)}
.veredito .selo{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
                color:var(--faixa,var(--marca))}
.veredito h3{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:24px;
             line-height:1.2;margin:8px 0 6px;letter-spacing:-.01em;text-wrap:balance}
.veredito p{margin:0;color:var(--fraco);font-size:13.5px;line-height:1.6}

/* ---------- As listas do resultado ----------
   Eram <table>, e a regra de tabela alinha a última célula à direita para os
   valores em dinheiro da calculadora. Numa lista de uma coluna só, a última
   célula é também a primeira, e as frases apareciam todas encostadas na margem
   direita. */
.pontos{list-style:none;margin:0;padding:0}
.pontos li{position:relative;padding:10px 0 10px 18px;font-size:14px;
           border-bottom:1px solid var(--borda-suave)}
.pontos li:last-child{border-bottom:0}
.pontos li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:1px;
                   background:var(--fraco)}

/* ---------- Os achados (raio-x) ----------
   Cada linha é uma irregularidade. A tarja da esquerda diz a gravidade, e o
   olho percorre a coluna de tarjas antes de ler qualquer texto. */
.achados{display:grid;gap:8px;margin-top:8px}
/* A TARJA É POSICIONADA, NÃO É COLUNA DE GRADE.
   Como coluna, ela só alcançava a altura da primeira linha e parava no meio do
   cartão; e o texto, sem coluna declarada, caía dentro dos 4 pixels da tarja e
   virava uma torre de letras soltas. Encostada nas quatro bordas, ela acompanha
   a altura do achado qualquer que seja o tamanho do texto. */
.achado{position:relative;display:block;
        border:1px solid var(--borda);border-radius:12px;padding:13px 15px 13px 17px;
        overflow:hidden;background:var(--card)}
.achado::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
                background:var(--faixa,var(--marca))}
.achado b{display:block;font-weight:600;font-size:14.5px;line-height:1.35}
.achado span{display:block;color:var(--fraco);font-size:12.5px;margin-top:3px;line-height:1.5}
.achado em{display:block;color:var(--fraco);font-size:11px;font-style:normal;margin-top:5px;
           letter-spacing:.04em;text-transform:uppercase;font-weight:600}

/* Contagem grande no topo do raio-x. */
.placar{display:flex;align-items:baseline;gap:12px;margin:2px 0 4px}
.placar b{font-family:'Newsreader',Georgia,serif;font-size:52px;font-weight:600;line-height:1;
          letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.placar span{color:var(--fraco);font-size:14px;line-height:1.4}

@media(max-width:420px){ .provas{flex-direction:column} }

@media(prefers-color-scheme:dark){
  :root{--bg:#10171d;--card:#1a242d;--texto:#eef2f6;--fraco:#9fb0bf;
        --borda:#2b3742;--borda-suave:#222e38;--marca:#7e97ab;--marca2:#93a9ba;
        --ardosia:#16202a;--ardosia2:#22303b;--ok:#7cc39a;--alerta:#e0a276;
        --sinal-1:#e08079;--sinal-2:#e39a6a;--sinal-3:#d9b262;--sinal-4:#7cc39a;
        --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -22px rgba(0,0,0,.9)}
  .opcao[aria-pressed="true"]{background:#22303b}
  .aviso{background:#2a2317;border-color:#4a3d24;color:#e8cf9f}
  input{background:#111a21;color:var(--texto)}
  .btn-1{background:var(--marca);color:#0f1319}
  .btn-1:hover:not(:disabled){background:#93a9ba}
  .erro-campo{color:#e08079}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important} }