/* ==========================================================
CálculoCLT — design system
Identidade: carteira de trabalho (CTPS) — marinho + dourado
Escrito MOBILE-FIRST. As media queries só adicionam.
========================================================== */
/* As fontes são carregadas por no de cada página.
Um @import aqui obriga o navegador a baixar este arquivo, interpretar,
descobrir a fonte e só então buscá-la — três idas em série, com a
página em branco no meio. Com as duas descem em paralelo. */
:root{
--navy:#0F2C44; --navy-deep:#0A1F31; --navy-soft:#1B4260;
--paper:#F2EFE6; --card:#FCFAF4; --gold:#C6952F; --gold-soft:#E8D5A3;
--ink:#101B26; --mute:#5B6674; --line:#DDD8CA;
--pos:#1C6B4E; --neg:#A93F2C;
--r:8px;
--pad:16px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:var(--navy); }
.mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.serif{ font-family:'Instrument Serif',serif; font-weight:400; }
.only-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 var(--pad); }
@media (min-width:760px){ :root{ --pad:24px; } }
/* =============== NAVEGAÇÃO =============== */
.nav{
background:var(--navy-deep); position:sticky; top:0; z-index:70;
border-bottom:1px solid rgba(232,213,163,.16);
}
.nav-in{ display:flex; align-items:center; gap:12px; height:62px; }
.nav-brand{
font-family:'Instrument Serif',serif; font-size:26px; color:#fff;
text-decoration:none; white-space:nowrap; letter-spacing:-.01em; flex-shrink:0;
line-height:1;
}
.nav-brand b{ color:var(--gold-soft); font-weight:400; font-style:italic; }
@media (min-width:900px){ .nav-in{ height:74px; } .nav-brand{ font-size:33px; } }
/* rolagem horizontal com indicação visual de que há mais itens */
.nav-links{
display:flex; gap:2px; flex:1; overflow-x:auto; overflow-y:hidden;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
mask-image:linear-gradient(to right, #000 88%, transparent 100%);
-webkit-mask-image:linear-gradient(to right, #000 88%, transparent 100%);
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
font-size:13.5px; color:rgba(255,255,255,.66); text-decoration:none;
padding:7px 11px; border-radius:5px; white-space:nowrap; transition:.15s;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-links a[aria-current="page"]{ color:var(--gold-soft); background:rgba(198,149,47,.15); }
@media (min-width:900px){
.nav-links{ mask-image:none; -webkit-mask-image:none; justify-content:flex-end; }
}
/* =============== CAPA =============== */
.cover{
background:
radial-gradient(130% 100% at 82% -12%, rgba(198,149,47,.17), transparent 62%),
linear-gradient(168deg, var(--navy-soft) 0%, var(--navy) 44%, var(--navy-deep) 100%);
color:#fff; padding:28px 0 26px; position:relative; overflow:hidden;
border-bottom:3px solid var(--gold);
}
.crest{
font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em;
text-transform:uppercase; color:var(--gold-soft); line-height:1.5;
display:flex; align-items:center; gap:10px; margin-bottom:13px;
}
.crest::after{ content:""; flex:1; height:1px; background:rgba(232,213,163,.3); min-width:16px; }
.cover h1{
font-family:'Instrument Serif',serif; font-weight:400;
font-size:clamp(30px,8.2vw,52px); line-height:1.06; margin:0 0 14px;
letter-spacing:-.015em; overflow-wrap:break-word; max-width:19ch;
text-wrap:balance;
}
.cover h1 em{ font-style:italic; color:var(--gold-soft); }
.lede{ color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.62; max-width:56ch; margin:0; }
/* moldura tipo documento — só faz sentido a partir do tablet */
@media (min-width:760px){
.cover{ padding:42px 0 38px; }
.cover::after{
content:""; position:absolute; inset:14px; pointer-events:none;
border:1px solid rgba(232,213,163,.22); border-radius:4px;
}
.crest{ font-size:10px; }
}
/* Na tela larga o título e o texto ficavam espremidos na esquerda com
metade da capa vazia. Aqui viram duas colunas: título grande à
esquerda, texto de apoio à direita, alinhados pela primeira linha. */
@media (min-width:1000px){
.cover{ padding:52px 0 46px; }
.cover h1{ font-size:clamp(46px,4.2vw,58px); margin:0; max-width:none; }
.cover-cols{
display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
gap:16px 52px; align-items:start;
}
.lede{ font-size:17px; line-height:1.7; max-width:46ch; padding-top:10px; }
}
/* =============== LAYOUT DA CALCULADORA =============== */
.grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px; }
@media (min-width:900px){
.grid{ grid-template-columns:330px 1fr; align-items:start; gap:24px; }
/* 74px do menu fixo + 18px de respiro */
.form-card{ position:sticky; top:92px; }
}
.form-card{
background:var(--card); border:1px solid var(--line);
border-radius:var(--r); padding:18px;
}
@media (min-width:760px){ .form-card{ padding:22px; } }
.form-card h2{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--mute); margin:0 0 16px; font-weight:500;
}
.fld{ margin-bottom:16px; }
.fld:last-of-type{ margin-bottom:14px; }
.fld > label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; }
.fld input, .fld select{
width:100%; padding:12px 12px; border:1px solid var(--line); border-radius:6px;
background:#fff; color:var(--ink); font-family:'Archivo',sans-serif;
/* 16px é obrigatório: abaixo disso o iOS dá zoom ao focar o campo */
font-size:16px; line-height:1.3;
transition:border-color .15s, box-shadow .15s;
appearance:none; -webkit-appearance:none;
}
.fld select{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2366717E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}
.fld input.mono, .fld select.mono{ font-family:'JetBrains Mono',monospace; }
.fld input:hover, .fld select:hover{ border-color:#BEB6A2; }
.fld input:focus, .fld select:focus{
outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,44,68,.13);
}
@media (min-width:900px){ .fld input, .fld select{ font-size:14.5px; padding:10px 11px; } }
.hint{ font-size:12.5px; color:var(--mute); margin:6px 0 0; line-height:1.5; }
.chk{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; cursor:pointer; }
.chk input{ width:auto; margin:3px 0 0; accent-color:var(--navy); transform:scale(1.15); flex-shrink:0; }
.btn{
width:100%; padding:14px; border:none; border-radius:6px;
background:var(--navy); color:#fff; font-family:'Archivo',sans-serif;
font-size:14.5px; font-weight:600; cursor:pointer; transition:background .15s;
min-height:48px; /* alvo de toque confortável */
}
.btn:hover{ background:var(--navy-soft); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* =============== RESULTADO =============== */
.out{ display:flex; flex-direction:column; gap:16px; }
.hero{
background:linear-gradient(150deg, var(--navy-soft), var(--navy-deep));
border-radius:var(--r); padding:22px 20px 20px; color:#fff;
}
@media (min-width:760px){ .hero{ padding:26px 24px 22px; } }
.hero-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.hero-lbl{
font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em;
text-transform:uppercase; color:var(--gold-soft);
}
.hero-meta{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgba(255,255,255,.56); }
.hero-val{
font-family:'JetBrains Mono',monospace; font-weight:700;
font-size:clamp(30px,8.6vw,50px); line-height:1.05; letter-spacing:-.025em;
overflow-wrap:break-word;
}
.hero-note{ font-size:13px; color:rgba(255,255,255,.64); margin-top:9px; line-height:1.5; }
.bar{ display:flex; height:8px; border-radius:99px; overflow:hidden; margin-top:18px; background:rgba(255,255,255,.13); }
.bar i{ display:block; height:100%; transition:width .5s cubic-bezier(.22,1,.36,1); }
.bar .liq{ background:var(--gold); }
.bar .des{ background:rgba(255,255,255,.34); }
.bar-key{ display:flex; gap:14px; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgba(255,255,255,.64); flex-wrap:wrap; }
.bar-key span{ display:flex; align-items:center; gap:6px; }
.dot{ width:7px; height:7px; border-radius:99px; display:inline-block; flex-shrink:0; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.panel-h{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.panel-h h3{ font-family:'Instrument Serif',serif; font-weight:400; font-size:20px; margin:0; line-height:1.2; }
.panel-h .tag{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
@media (min-width:760px){ .panel-h{ padding:15px 20px; } }
/* linha de valor: no celular o rótulo pode ocupar a linha toda */
.row{
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:12px 18px; border-bottom:1px solid rgba(221,216,202,.6);
}
.row:last-child{ border-bottom:none; }
.row .l{ font-size:14.5px; line-height:1.4; min-width:0; flex:1; }
.row .l small{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--mute); margin-top:3px; line-height:1.4; }
.row .v{ font-family:'JetBrains Mono',monospace; font-size:14.5px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.v.pos{ color:var(--pos); }
.v.neg{ color:var(--neg); }
.row.sum{ background:rgba(15,44,68,.05); border-top:1px solid var(--line); }
.row.sum .l{ font-weight:700; }
.row.sum .v{ font-weight:700; font-size:15.5px; }
@media (min-width:760px){ .row{ padding:12px 20px; } }
.cards{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:620px){ .cards{ grid-template-columns:1fr 1fr; } }
.big-val{ font-family:'JetBrains Mono',monospace; font-size:25px; font-weight:700; color:var(--navy); padding:16px 18px 4px; letter-spacing:-.02em; }
.body-txt{ padding:0 18px 18px; font-size:13.5px; color:var(--mute); line-height:1.6; }
.body-txt p{ margin:9px 0 0; }
.body-txt p:first-child{ margin-top:0; }
@media (min-width:760px){ .big-val{ padding:16px 20px 4px; } .body-txt{ padding:0 20px 18px; } }
.pill{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:99px; margin:16px 18px 0; }
.pill.yes{ background:rgba(28,107,78,.13); color:var(--pos); }
.pill.no{ background:rgba(169,63,44,.11); color:var(--neg); }
.pill.warn{ background:rgba(198,149,47,.17); color:#6F4F0E; }
.empty{ padding:38px 20px; text-align:center; color:var(--mute); font-size:14.5px; }
/* =============== BARRA FIXA DE RESULTADO (só celular) =============== */
.mini{
position:fixed; left:0; right:0; bottom:0; z-index:65;
background:var(--navy-deep); border-top:2px solid var(--gold);
padding:11px 16px calc(11px + env(safe-area-inset-bottom));
display:flex; align-items:center; justify-content:space-between; gap:12px;
box-shadow:0 -4px 18px rgba(10,31,49,.26);
transform:translateY(110%); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.mini.on{ transform:translateY(0); }
.mini .k{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); }
.mini .n{ font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.mini button{
background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22);
border-radius:6px; padding:9px 14px; font-family:'Archivo',sans-serif;
font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; min-height:40px;
}
.mini button:hover{ background:rgba(255,255,255,.17); }
@media (min-width:900px){ .mini{ display:none !important; } }
/* =============== CHAMADA DE LEAD =============== */
.lead{
border:1px solid var(--gold); background:linear-gradient(180deg,#FBF5E7,#F6ECD6);
border-radius:var(--r); padding:18px;
}
.lead h4{ font-family:'Instrument Serif',serif; font-weight:400; font-size:20px; margin:0 0 7px; line-height:1.25; }
.lead p{ font-size:14px; color:#6C5A32; margin:0 0 14px; line-height:1.55; }
.lead a{
display:block; text-align:center; background:var(--navy); color:#fff; text-decoration:none;
font-size:14.5px; font-weight:600; padding:13px 20px; border-radius:6px; min-height:48px;
line-height:22px;
}
.lead a:hover{ background:var(--navy-soft); }
@media (min-width:560px){ .lead{ padding:20px; } .lead a{ display:inline-block; padding:12px 22px; } }
/* =============== CONTEÚDO / ARTIGOS =============== */
.article{ max-width:720px; margin:36px auto 0; }
.article h2{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(23px,5.6vw,27px); margin:32px 0 10px; line-height:1.2; }
.article h3{ font-size:17px; font-weight:700; margin:24px 0 7px; line-height:1.35; }
.article p{ margin:0 0 13px; color:#2A3540; }
.article ul, .article ol{ margin:0 0 15px; padding-left:22px; color:#2A3540; }
.article li{ margin-bottom:7px; }
.article a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
/* tabela rolável — impede o estouro horizontal no celular */
.tw{
overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0 20px;
border:1px solid var(--line); border-radius:var(--r); background:var(--card);
}
.tw::-webkit-scrollbar{ height:6px; }
.tw::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.article table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:0; min-width:340px; }
.article th, .article td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.article tr:last-child td{ border-bottom:none; }
.article th{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:500; background:rgba(15,44,68,.035); }
.article td.mono{ font-family:'JetBrains Mono',monospace; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{
cursor:pointer; font-weight:600; font-size:15.5px; list-style:none;
display:flex; justify-content:space-between; gap:14px; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:20px; line-height:1; flex-shrink:0; }
.faq details[open] summary::after{ content:"−"; }
.faq details p{ margin:11px 0 0; font-size:14.5px; color:#414E5A; }
/* =============== HUB / LISTAS =============== */
.tools{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; }
@media (min-width:600px){ .tools{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .tools{ grid-template-columns:1fr 1fr 1fr; } }
.tool{
display:block; text-decoration:none; color:inherit; background:var(--card);
border:1px solid var(--line); border-radius:var(--r); padding:20px;
transition:transform .15s, box-shadow .15s, border-color .15s;
}
.tool:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(15,44,68,.1); border-color:#C4BCA6; }
.tool .num{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--gold); }
.tool h3{ font-family:'Instrument Serif',serif; font-weight:400; font-size:22px; margin:8px 0 7px; line-height:1.2; }
.tool p{ font-size:14px; color:var(--mute); margin:0; line-height:1.55; }
.posts{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; }
@media (min-width:700px){ .posts{ grid-template-columns:1fr 1fr; } }
.post{
display:block; text-decoration:none; color:inherit; background:var(--card);
border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; transition:.15s;
}
.post:hover{ border-color:#C4BCA6; box-shadow:0 4px 16px rgba(15,44,68,.08); }
.post .cat{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.post h3{ font-family:'Instrument Serif',serif; font-weight:400; font-size:20px; margin:7px 0 6px; line-height:1.22; }
.post p{ font-size:14px; color:var(--mute); margin:0; line-height:1.55; }
.post-head{ max-width:720px; margin:30px auto 0; }
.post-head .cat{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.post-head h1{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(28px,7vw,42px); line-height:1.1; margin:11px 0 13px; }
.post-head .sub{ font-size:16.5px; color:var(--mute); line-height:1.6; margin:0; }
.post-head .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mute); margin-top:15px; padding-top:15px; border-top:1px solid var(--line); line-height:1.6; }
.cta-box{
max-width:720px; margin:30px auto; background:var(--card);
border:1px solid var(--line); border-left:3px solid var(--gold);
border-radius:var(--r); padding:18px 20px;
}
.cta-box h4{ font-family:'Instrument Serif',serif; font-weight:400; font-size:19px; margin:0 0 7px; line-height:1.25; }
.cta-box p{ font-size:14px; color:var(--mute); margin:0 0 11px; line-height:1.55; }
.cta-box a{ font-size:14px; font-weight:600; color:var(--navy); }
/* =============== ANÚNCIO =============== */
.adslot{
margin:22px 0; min-height:100px; display:flex; align-items:center; justify-content:center;
border:1px dashed var(--line); border-radius:var(--r); color:var(--mute);
font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em;
text-transform:uppercase; text-align:center; padding:12px; overflow:hidden;
}
/* =============== RODAPÉ =============== */
.disclaimer{
margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
font-size:12.5px; color:var(--mute); line-height:1.7;
}
.disclaimer strong{ color:var(--ink); font-weight:600; }
footer.site{
margin-top:48px; background:var(--navy-deep); color:rgba(255,255,255,.58);
padding:28px 0 calc(28px + env(safe-area-inset-bottom)); font-size:13.5px;
}
footer.site a{ color:rgba(255,255,255,.8); text-decoration:none; }
footer.site a:hover{ color:var(--gold-soft); text-decoration:underline; }
.foot-grid{ display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; }
.foot-links{ display:flex; gap:8px 16px; flex-wrap:wrap; }
/* espaço para a barra fixa não cobrir o rodapé no celular */
body.has-mini footer.site{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
@media (min-width:900px){ body.has-mini footer.site{ padding-bottom:28px; } }
/* =============== BANNER DE COOKIES (LGPD) =============== */
.ct-cookie{
position:fixed; left:0; right:0; bottom:0; z-index:100;
background:var(--navy-deep); color:rgba(255,255,255,.84);
border-top:2px solid var(--gold);
padding:15px 16px calc(15px + env(safe-area-inset-bottom));
box-shadow:0 -6px 24px rgba(10,31,49,.3);
}
.ct-cookie-in{ max-width:1080px; margin:0 auto; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ct-cookie p{ margin:0; font-size:13.5px; line-height:1.55; flex:1; min-width:230px; }
.ct-cookie a{ color:var(--gold-soft); }
.ct-cookie-btns{ display:flex; gap:10px; width:100%; }
.ct-cookie button{
font-family:'Archivo',sans-serif; font-size:14px; font-weight:600;
padding:12px 18px; border-radius:6px; cursor:pointer; border:1px solid transparent;
flex:1; min-height:46px;
}
.ct-cookie-ok{ background:var(--gold); color:#1B1305; }
.ct-cookie-ok:hover{ background:#D8A63C; }
.ct-cookie-alt{ background:transparent; color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.3); }
.ct-cookie-alt:hover{ color:#fff; border-color:rgba(255,255,255,.55); }
@media (min-width:560px){
.ct-cookie-btns{ width:auto; }
.ct-cookie button{ flex:none; }
}
@media print{ .ct-cookie{ display:none !important; } }
/* =============== IMPRESSÃO / MOVIMENTO =============== */
@media print{
.nav, .form-card, .adslot, .lead, .mini, .cta-box{ display:none !important; }
/* .article NÃO entra aqui: é o corpo de texto de todas as páginas.
Escondê-lo fazia artigos e páginas legais imprimirem em branco. */
.article{ max-width:none; }
.article a{ text-decoration:none; }
.tw{ overflow:visible; border:none; }
.article table{ min-width:0; }
.article th, .article td{ white-space:normal; }
.faq details{ page-break-inside:avoid; }
.faq details > *{ display:revert !important; }
body{ background:#fff; }
.grid{ grid-template-columns:1fr; }
.hero{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media (prefers-reduced-motion:reduce){
*{ animation:none !important; transition:none !important; }
html{ scroll-behavior:auto; }
}
/* aviso obrigatório em bloco patrocinado */
/* Aviso obrigatório em bloco patrocinado.
Precisa passar no contraste AA: é divulgação exigida, não decoração. */
.lead-aviso{
margin-top:11px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
letter-spacing:.1em; text-transform:uppercase; color:#6B5A28;
}