/* NOIRIS — folha compartilhada das ferramentas gratuitas (/pt/ferramentas/*).
   Tokens idênticos aos de pt/index.html. Compartilhada de propósito: são
   páginas irmãs construídas juntas, e CSS inline em cada uma divergiria. */
:root{
  --noir:#050505;--white:#fff;--obs:#111;--obs2:#181818;
  --silver:#C7C7C7;--sdim:rgba(199,199,199,.72);
  --ch:#C8B89A;--cdim:rgba(200,184,154,.15);
  --border:rgba(199,199,199,.08);
  --green:#25D366;--red:#FF6B60;
  --D:'Space Grotesk',sans-serif;--B:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noir);color:var(--white);font-family:var(--B);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--cdim)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:22px 40px;transition:background .4s,padding .3s}
#nav.stuck{background:rgba(5,5,5,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:14px 40px;border-bottom:1px solid var(--border)}
.nav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.n-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.n-logo img{height:30px;width:30px;object-fit:contain}
.n-word{font-family:var(--D);font-size:14px;font-weight:600;letter-spacing:.18em}
.n-word em{font-style:normal;color:var(--ch);font-weight:300}
.nav-btn{display:inline-block;border:1px solid rgba(200,184,154,.3);color:var(--ch);padding:8px 20px;font-size:12px;font-weight:500;letter-spacing:.09em;border-radius:2px;text-decoration:none;transition:all .3s;white-space:nowrap}
.nav-btn:hover{background:var(--ch);color:var(--noir)}

/* LAYOUT */
main{max-width:1180px;margin:0 auto;padding:150px 40px 90px}
.narrow{max-width:820px}
.s-label{display:block;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ch);margin-bottom:22px}
h1{font-family:var(--D);font-size:clamp(34px,5vw,60px);font-weight:300;line-height:1.06;letter-spacing:-.025em;margin-bottom:22px}
h1 em{font-style:italic;color:var(--ch)}
.lead{font-size:16px;color:var(--sdim);line-height:1.8;max-width:640px;margin-bottom:14px}
.fineprint{font-size:12px;color:rgba(199,199,199,.5);line-height:1.6;margin-top:10px}
h2{font-family:var(--D);font-size:clamp(22px,2.6vw,32px);font-weight:300;letter-spacing:-.02em;margin:56px 0 18px}
h3{font-family:var(--D);font-size:17px;font-weight:400;letter-spacing:-.01em;margin-bottom:8px}
.gold{color:var(--ch)}

/* CARD / PAINEL */
.panel{border:1px solid var(--border);background:var(--obs);border-radius:2px;padding:34px 32px;margin-top:32px}
.panel.hi{border-color:rgba(200,184,154,.22);background:rgba(200,184,154,.04)}

/* FORM */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ch)}
.field .hint{font-size:11.5px;color:rgba(199,199,199,.5);line-height:1.5}
input,select,textarea{background:var(--noir);border:1px solid var(--border);color:var(--white);font-family:var(--B);font-size:14px;padding:12px 14px;border-radius:2px;width:100%;transition:border-color .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(200,184,154,.45)}
textarea{resize:vertical;min-height:82px;line-height:1.6}
select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ch) 50%),linear-gradient(135deg,var(--ch) 50%,transparent 50%);background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select option{background:var(--obs)}
input[type=range]{padding:0;height:3px;background:var(--border);appearance:none;border:0}
input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ch);cursor:pointer}
.btn{display:inline-block;background:var(--ch);color:var(--noir);padding:14px 34px;border-radius:2px;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;border:0;cursor:pointer;font-family:var(--B);transition:all .3s}
.btn:hover{background:var(--white);transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-ghost{display:inline-block;background:transparent;border:1px solid var(--border);color:var(--sdim);padding:13px 26px;border-radius:2px;font-size:12.5px;letter-spacing:.05em;cursor:pointer;font-family:var(--B);text-decoration:none;transition:all .25s}
.btn-ghost:hover{border-color:var(--ch);color:var(--ch)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}

/* RESULTADO */
.out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:26px}
.out-cell{background:var(--noir);padding:26px 22px}
.out-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ch);display:block;margin-bottom:10px}
/* display:block nos dois: são <span>, e sem isto o subtexto flui colado ao
   número grande em vez de ficar embaixo dele. */
.out-v{display:block;font-family:var(--D);font-size:clamp(24px,3.2vw,38px);font-weight:300;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.out-s{display:block;font-size:12px;color:var(--sdim);margin-top:8px;line-height:1.5}

/* TABELA (mapa de decisão) */
.tbl-wrap{overflow-x:auto;margin-top:24px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;min-width:900px}
th{background:var(--obs2);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ch);font-weight:500;text-align:left;padding:13px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:6px;border-bottom:1px solid var(--border);vertical-align:top}
td input,td select,td textarea{border-color:transparent;background:transparent;font-size:13px;padding:9px 10px}
td input:focus,td select:focus,td textarea:focus{background:var(--noir);border-color:rgba(200,184,154,.4)}
tr:hover td{background:rgba(255,255,255,.015)}
.row-del{background:none;border:0;color:rgba(199,199,199,.35);cursor:pointer;font-size:17px;padding:6px 10px;line-height:1}
.row-del:hover{color:var(--red)}

/* MENSAGEM */
.msg{font-size:13px;line-height:1.65;padding:14px 16px;border-radius:2px;margin-top:16px;display:none}
.msg.ok{display:block;background:rgba(200,184,154,.07);border:1px solid rgba(200,184,154,.28);color:var(--ch)}
.msg.err{display:block;background:rgba(255,107,96,.07);border:1px solid rgba(255,107,96,.3);color:var(--red)}

/* LISTA DE QUIZ */
.q{border-bottom:1px solid var(--border);padding:24px 0}
.q:last-of-type{border-bottom:0}
.q-t{font-family:var(--D);font-size:17px;font-weight:400;margin-bottom:16px;line-height:1.35}
.opts{display:grid;gap:9px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 15px;border:1px solid var(--border);border-radius:2px;cursor:pointer;font-size:13.5px;color:var(--sdim);line-height:1.5;transition:all .2s}
.opt:hover{border-color:rgba(200,184,154,.28)}
.opt input{width:15px;height:15px;flex-shrink:0;margin-top:2px;accent-color:var(--ch)}
.opt.sel{border-color:var(--ch);background:rgba(200,184,154,.05);color:var(--white)}

/* HUB */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:40px}
.tool{background:var(--obs);padding:34px 30px;text-decoration:none;display:flex;flex-direction:column;transition:background .3s}
.tool:hover{background:var(--obs2)}
.tool-k{font-family:var(--D);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ch);margin-bottom:14px}
.tool-n{font-family:var(--D);font-size:21px;font-weight:400;letter-spacing:-.01em;margin-bottom:10px}
.tool-d{font-size:13.5px;color:var(--sdim);line-height:1.75;margin-bottom:20px}
.tool-go{margin-top:auto;font-size:12px;letter-spacing:.05em;color:var(--ch);border-bottom:1px solid rgba(200,184,154,.25);padding-bottom:3px;align-self:flex-start}

/* FOOTER */
footer{background:var(--obs);border-top:1px solid var(--border);padding:44px 40px;margin-top:90px}
.ft-in{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.ft-in p{font-size:11.5px;color:rgba(199,199,199,.6)}
.ft-in a{font-size:12px;color:var(--sdim);text-decoration:none;margin-left:22px}
.ft-in a:hover{color:var(--white)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ch);outline-offset:3px;border-radius:2px}

@media(max-width:860px){
  #nav{padding:16px 20px}#nav.stuck{padding:12px 20px}
  main{padding:110px 20px 60px}
  .grid2,.grid3,.out,.tools{grid-template-columns:1fr}
  .panel{padding:26px 20px}
  footer{padding:34px 20px}
  .ft-in a{margin:0 18px 0 0}
}

/* IMPRESSÃO — o Mapa de Decisão precisa sair em papel/PDF legível */
@media print{
  @page{size:A4 landscape;margin:12mm}
  #nav,footer,.noprint{display:none!important}
  body{background:#fff;color:#111}
  main{padding:0;max-width:none}
  .panel{border-color:#ccc;background:#fff}
  h1,h2,h3,.out-v{color:#111}
  .s-label,.out-k,th,.gold{color:#7a5f28}
  table{min-width:0}
  th{background:#f2efe8;color:#7a5f28}
  td,th{border-color:#ddd}
  td input,td select,td textarea{color:#111;-webkit-text-fill-color:#111;background:#fff;border-color:#e5e5e5}
  .lead,.out-s,.fineprint{color:#444}
}