/* ============================================================
   Lincoln Souza — sistema visual
   Conceito: documento de analise, nao landing page.
   Papel quente, tinta escura, terracota como unico acento.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Archivo:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f7f4ef;
  --paper-2:#efeae1;
  --ink:#16191c;
  --ink-2:#3d444d;
  --ink-3:#7a828c;
  --rule:#ddd6c9;
  --rule-2:#c8bfae;
  --terra:#9c4221;
  --terra-lite:#c86a44;
  --moss:#3f5c3a;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --gut:clamp(0px,7vw,116px);      /* goteira esquerda */
  --col:min(100%,640px);            /* coluna de leitura */
  --pad:clamp(20px,5vw,44px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--terra);color:var(--paper)}

/* ---------- estrutura ---------- */
.sheet{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.bloco{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);gap:0}
@media(max-width:760px){.bloco{grid-template-columns:1fr}}
.marca{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-top:9px;
}
@media(max-width:760px){.marca{padding-bottom:10px}}
.corpo{max-width:var(--col)}
.larga{max-width:820px}

/* ---------- tipografia ---------- */
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);display:flex;align-items:center;gap:12px;
}
.kicker::after{content:"";flex:1;height:1px;background:var(--rule-2);max-width:120px}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,6.4vw,72px);line-height:1.02;letter-spacing:-.022em;
  font-variation-settings:"opsz" 144;margin:.28em 0 0;
}
h1 em{font-style:italic;font-variation-settings:"opsz" 144}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.4vw,36px);line-height:1.12;letter-spacing:-.018em;
  font-variation-settings:"opsz" 72;
}
h3{font-family:var(--sans);font-weight:600;font-size:16.5px;letter-spacing:-.006em}
.lede{font-size:clamp(17px,2.1vw,19.5px);line-height:1.52;color:var(--ink-2);margin-top:22px}
p{margin-top:14px;color:var(--ink-2)}
p.tinta{color:var(--ink)}
strong{font-weight:600;color:var(--ink)}
.mini{font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- rulers ---------- */
.rule{height:1px;background:var(--rule);border:0}
.rule-2{height:3px;border:0;background:
  linear-gradient(var(--ink),var(--ink)) 0 0/100% 1px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
.tira{height:5px;background:var(--terra)}

/* ---------- seccoes ---------- */
section{padding:clamp(38px,6vw,62px) 0}
section + section{border-top:1px solid var(--rule)}

/* ---------- cabecalho ---------- */
.top{background:var(--ink);color:var(--paper);padding:0 0 clamp(46px,7vw,78px)}
.top .sheet{padding-top:clamp(26px,4vw,38px)}
.top h1{color:var(--paper)}
.top .lede{color:#b3b8be}
.top .kicker{color:var(--terra-lite)}
.top .kicker::after{background:#41474e}
.marcaTopo{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:clamp(30px,5vw,52px);border-bottom:1px solid #2b3138;margin-bottom:clamp(30px,5vw,48px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#8a929b;
}
.marcaTopo b{color:var(--paper);font-weight:500}

/* ---------- campos: linha, nao caixa ---------- */
/* align-items:end alinha os inputs mesmo quando uma label tem dica e a outra nao */
.campos{display:grid;grid-template-columns:1fr 1fr;align-items:end;
  gap:clamp(20px,3vw,34px) clamp(24px,4vw,48px);margin-top:30px}
@media(max-width:640px){.campos{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column}
.campo.full{grid-column:1/-1}
.campo label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.campo .dica{
  display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;
  color:var(--ink-3);margin-top:5px;line-height:1.4;
}
.linha-in{display:flex;align-items:baseline;gap:8px;border-bottom:1.5px solid var(--rule-2);
  padding-bottom:7px;transition:border-color .18s ease}
.linha-in:focus-within{border-color:var(--terra)}
.linha-in input,.linha-in select{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(19px,2.4vw,23px);font-weight:500;color:var(--ink);
  border:0;background:transparent;width:100%;padding:0;outline:none;letter-spacing:-.01em;
}
.linha-in .un{font-family:var(--mono);font-size:14px;color:var(--ink-3);white-space:nowrap}
select.plain{
  font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);
  border:0;border-bottom:1.5px solid var(--rule-2);background:transparent;width:100%;
  padding:0 0 8px;outline:none;cursor:pointer;letter-spacing:-.005em;
}
select.plain:focus{border-color:var(--terra)}
input[type=text],input[type=email],input[type=tel]{
  font-family:var(--sans);font-size:17.5px;font-weight:400;color:var(--ink);
  border:0;border-bottom:1.5px solid var(--rule-2);background:transparent;width:100%;
  padding:0 0 8px;outline:none;
}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus{border-color:var(--terra)}
input::placeholder{color:#b3ab9c}

/* ---------- botao ---------- */
.btn{
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.005em;
  background:var(--terra);color:var(--paper);border:0;padding:17px 30px;cursor:pointer;
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:background .18s ease;
}
.btn:hover{background:#83371b}
.btn .seta{font-family:var(--mono);font-size:15px}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-fantasma{
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);
}
.btn-fantasma:hover{background:var(--ink);color:var(--paper)}

/* ---------- gate ---------- */
.gate{border-top:3px solid var(--ink);padding-top:26px;margin-top:clamp(34px,5vw,52px)}
.gate .selo{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra);margin-bottom:10px;
}
.gate h2{margin-bottom:6px}
.gate .legal{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.5}
.erro{font-size:13.5px;color:var(--terra);margin-top:12px;display:none}

/* ---------- resultado ---------- */
.saida{background:var(--ink);color:var(--paper);margin-top:0}
.saida .grande{
  font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144;
  font-size:clamp(56px,11vw,116px);line-height:.94;letter-spacing:-.035em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.saida .etiq{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--terra-lite);
}
.saida .sob{color:#9aa1a9;font-size:14px;margin-top:12px;max-width:420px}
.par{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,52px);align-items:end}
@media(max-width:700px){.par{grid-template-columns:1fr;gap:26px}}
.secundario .val{
  font-family:var(--mono);font-weight:500;font-size:clamp(26px,4vw,38px);
  color:#8a929b;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.contas{margin-top:clamp(32px,5vw,48px)}
.contas .tit{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--terra-lite);padding-bottom:10px;border-bottom:1px solid #2b3138;margin-bottom:2px;
}
.lin{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:11px 0;border-bottom:1px solid #23282e;font-size:15px}
.lin span:first-child{color:#9aa1a9}
.lin span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--paper);white-space:nowrap;font-size:14.5px}
.lin.menos span:last-child{color:#d99175}
.lin.soma{border-bottom:0;border-top:1.5px solid #41474e;margin-top:4px;padding-top:15px;font-size:16.5px}
.lin.soma span:first-child{color:var(--paper);font-weight:600}
.lin.soma span:last-child{font-size:17px;font-weight:600}
.leitura{border-left:2px solid var(--terra);padding:2px 0 2px 18px;margin-top:clamp(30px,4vw,42px);
  color:#b3b8be;font-size:14.5px;line-height:1.6;max-width:640px}
.leitura strong{color:var(--paper)}

/* ---------- listas numeradas ---------- */
.itens{margin-top:8px}
.item{display:grid;grid-template-columns:44px 1fr;gap:0 18px;padding:20px 0;border-bottom:1px solid var(--rule)}
.item:last-child{border-bottom:0}
.item .n{font-family:var(--mono);font-size:12px;color:var(--terra);padding-top:3px;letter-spacing:.06em}
.item p{margin-top:5px;font-size:14.8px;line-height:1.55}

/* ---------- tabela ---------- */
.tab{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:22px}
.tab th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:0 14px 11px 0;border-bottom:1.5px solid var(--ink)}
.tab th.r,.tab td.r{text-align:right;padding-right:0}
.tab td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.tab td:first-child{color:var(--ink);font-weight:500}
.tab tr:last-child td{border-bottom:0}
.tab .vaz{font-family:var(--mono);color:#c2b9a8;letter-spacing:.2em}

/* ---------- avisos ---------- */
.marginalia{
  border-left:2px solid var(--rule-2);padding-left:18px;margin-top:26px;
  font-size:13.8px;line-height:1.6;color:var(--ink-3);
}
.marginalia strong{color:var(--ink-2)}
.alerta{border-left:2px solid var(--terra)}

/* ---------- rodape ---------- */
.rodape{background:var(--ink);color:#8a929b;padding:clamp(38px,5vw,56px) 0 30px;font-size:14px}
.rodape .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
@media(max-width:640px){.rodape .cols{grid-template-columns:1fr}}
.rodape .nome{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--paper);
  font-variation-settings:"opsz" 72;letter-spacing:-.01em;margin-bottom:4px}
.rodape a{color:var(--terra-lite);text-decoration:none;border-bottom:1px solid transparent}
.rodape a:hover{border-bottom-color:var(--terra-lite)}
.rodape .fonte{margin-top:clamp(30px,4vw,44px);padding-top:20px;border-top:1px solid #2b3138;
  font-size:11.8px;line-height:1.65;color:#6b737c;max-width:900px}

/* ---------- revelacao ---------- */
[data-oculto]{display:none}
.revela{animation:sobe .55s cubic-bezier(.16,1,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .revela{animation:none}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   Artigos (blog e noticias) — usado pelos textos gerados
   ============================================================ */
.artigo{max-width:660px}
.artigo .datas{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.artigo h2{margin-top:34px}
.artigo h3{font-family:var(--sans);font-weight:600;font-size:17px;margin-top:24px;letter-spacing:-.008em}
.artigo p{font-size:16.5px;line-height:1.68;margin-top:16px}
.artigo p.destaque{font-size:18.5px;line-height:1.58;color:var(--ink)}
.artigo ul,.artigo ol{margin:16px 0 16px 22px}
.artigo li{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin-top:9px}
.artigo li::marker{color:var(--terra)}
.artigo blockquote{border-left:2px solid var(--terra);padding-left:20px;margin:26px 0;
  font-size:17px;line-height:1.6;color:var(--ink)}
.artigo .caixa{background:var(--paper-2);border:1px solid var(--rule);padding:20px 22px;margin:26px 0}
.artigo .caixa h3{margin-top:0}
.artigo .caixa p{font-size:15.5px;margin-top:10px}
.artigo .caixa p:first-of-type{margin-top:6px}
.artigo .tab{margin:24px 0}
.artigo .fim{margin-top:38px;padding-top:24px;border-top:2px solid var(--ink)}
.artigo .fim p{font-size:15.5px}
.migalhas{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#8a929b;margin-bottom:18px}
.migalhas a{color:#8a929b;text-decoration:none;border-bottom:1px solid transparent}
.migalhas a:hover{border-bottom-color:#8a929b}
.autor{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--rule)}
.autor .av{width:44px;height:44px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--rule-2);flex:0 0 44px}
.autor .nm{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.autor .fn{font-size:13px;color:var(--ink-3);margin-top:2px}