/* Conteúdo — Kit Empregador Doméstico
   Modo de leitura: o texto é o produto. Medida curta, ar entre os blocos,
   e toda página responde a pergunta antes de explicar.
   Carrega depois de lp.css e só acrescenta; não sobrescreve o sistema. */

:root{
  --prosa:#253d4e;   /* corpo de texto longo — 11,3:1 no branco */
  --meta:#54697a;    /* datas, categorias, legendas — 5,7:1 no branco */
  --rotulo:#1F6FAE;
  --f-texto:"Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
}

/* ══════════ capa do hub ══════════ */
.capa-conteudo{padding:76px 0 8px}
.capa-conteudo h1{
  font-size:clamp(34px,4.8vw,52px);line-height:1.06;font-weight:700;
  color:var(--navy);letter-spacing:-.015em;max-width:19ch;text-wrap:balance;
}
.capa-conteudo .sub{max-width:52ch}

/* ══════════ destaque ══════════ */
.destaque-post{
  margin-top:48px;display:block;text-decoration:none;
  background:linear-gradient(152deg,var(--navy),var(--navy-2));
  border-radius:14px;padding:44px 46px;color:#fff;
  box-shadow:0 22px 56px rgba(0,58,91,.20);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;
}
.destaque-post:hover{transform:translateY(-3px);box-shadow:0 28px 64px rgba(0,58,91,.26)}
.destaque-post .k{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--cyan)}
.destaque-post h2{font-size:clamp(26px,3.4vw,38px);color:#fff;margin-top:12px;max-width:20ch;line-height:1.1}
.destaque-post .resposta{
  margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--f-texto);font-size:clamp(16px,1.9vw,18.5px);line-height:1.6;
  color:#cfe4f0;max-width:60ch;
}
.destaque-post .leia{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-size:16.5px;font-weight:700;color:var(--cyan)}
.destaque-post .leia svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.destaque-post:hover .leia svg{transform:translateX(3px)}

/* ══════════ grade de posts ══════════ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.post{
  border:1px solid var(--line);border-radius:14px;padding:28px 26px;background:#fff;
  display:flex;flex-direction:column;text-decoration:none;
  transition:border-color .16s,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;
}
.post:hover{border-color:#c8dceb;transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,58,91,.10)}
.post .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--rotulo,#1F6FAE)}
.post h3{font-size:20.5px;font-weight:700;color:var(--navy);margin-top:10px;line-height:1.22;text-wrap:balance}
.post p{font-family:var(--f-texto);font-size:15.5px;color:var(--meta);margin-top:11px;
  line-height:1.58;flex:1;text-wrap:pretty}
.post .pe{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.post .min{font-size:13.5px;color:var(--meta);font-family:var(--f-texto)}
.post .seta{width:17px;height:17px;fill:none;stroke:var(--blue);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .18s}
.post:hover .seta{transform:translateX(3px)}

/* ══════════ tabela de referência no hub ══════════ */
.ref-tabela{margin-top:40px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.ref-tabela table{width:100%;border-collapse:collapse;font-family:var(--f-texto)}
.ref-tabela th{
  background:var(--navy);color:#fff;text-align:left;padding:15px 20px;
  font-family:var(--f);font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;font-weight:700;
}
.ref-tabela td{padding:15px 20px;border-top:1px solid var(--line);font-size:16px;color:var(--prosa)}
.ref-tabela tbody tr:first-child td{border-top:none}
.ref-tabela td:first-child{font-weight:500;color:var(--navy)}
.ref-tabela .destacada td{background:var(--cyan-pale);font-weight:700}
.dica-tabela{display:none;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--f-texto);font-size:13.5px;color:var(--meta)}
.dica-tabela svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

.ref-nota{font-family:var(--f-texto);font-size:14px;color:var(--meta);margin-top:14px;line-height:1.55;max-width:78ch}

/* ══════════ página do artigo ══════════ */
.artigo{padding:0 0 84px}
.artigo .wrap{max-width:760px}

.migalha{font-family:var(--f-texto);font-size:14px;color:var(--meta);padding:26px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.migalha a{color:var(--blue);text-decoration:none}
.migalha a:hover{text-decoration:underline}
.migalha .sep{color:#a9bccb}

.artigo-topo{padding:34px 0 0}
.artigo-topo .k{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--rotulo,#1F6FAE)}
.artigo-topo h1{
  font-size:clamp(31px,4.4vw,46px);line-height:1.08;font-weight:700;color:var(--navy);
  letter-spacing:-.015em;margin-top:13px;text-wrap:balance;
}
.artigo-topo .dek{font-family:var(--f-texto);font-size:clamp(17px,2.1vw,20px);color:var(--meta);
  margin-top:16px;line-height:1.55;max-width:60ch;text-wrap:pretty}
.artigo-topo .meta{font-family:var(--f-texto);font-size:14px;color:var(--meta);margin-top:22px;
  padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 20px}

/* a resposta curta — a assinatura do blog */
.resposta-curta{
  margin-top:34px;background:var(--navy);color:#fff;border-radius:14px;padding:30px 32px;
}
.resposta-curta .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.15em;
  font-weight:700;color:var(--cyan);display:block;margin-bottom:12px}
.resposta-curta p{font-family:var(--f-texto);font-size:clamp(17px,2.1vw,19.5px);
  line-height:1.58;color:#fff;text-wrap:pretty}

/* ══════════ corpo do texto ══════════ */
.prosa{font-family:var(--f-texto);font-size:18px;line-height:1.75;color:var(--prosa);margin-top:40px}
.prosa p{margin-top:24px;text-wrap:pretty}
.prosa p:first-child{margin-top:0}
.prosa b,.prosa strong{font-weight:700;color:var(--navy)}
.prosa i,.prosa em{font-style:italic}
.prosa h2{
  font-family:var(--f);font-size:clamp(23px,2.9vw,29px);line-height:1.2;font-weight:700;
  color:var(--navy);margin-top:52px;letter-spacing:-.01em;max-width:24ch;
}
.prosa ul,.prosa ol{margin-top:24px;padding-left:0;list-style:none}
.prosa li{position:relative;padding-left:30px;margin-top:13px;line-height:1.7}
.prosa ul li::before{
  content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;
  background:var(--cyan);flex:none;
}
.prosa ol{counter-reset:pa}
.prosa ol li{counter-increment:pa;padding-left:42px}
.prosa ol li::before{
  content:counter(pa);position:absolute;left:0;top:2px;width:27px;height:27px;border-radius:8px;
  background:var(--cyan-pale);color:var(--blue);font-family:var(--f);font-size:14.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* citação da lei */
.lei{
  margin-top:34px;background:var(--soft);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;
}
.lei .cab{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.lei .cab svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.lei .cab span{font-family:var(--f);font-size:12px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:700;color:var(--blue)}
.lei p{margin:0;font-size:17px;line-height:1.65;color:var(--prosa)}

/* caixa de atenção */
.caixa{
  margin-top:34px;background:var(--cyan-pale);border-radius:14px;padding:26px 28px;
}
.caixa .cab{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.caixa .cab svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.caixa .cab h3{font-family:var(--f);font-size:17.5px;font-weight:700;color:var(--navy);line-height:1.3}
.caixa p{margin:0;font-size:16.5px;line-height:1.62;color:#14364b}

/* tabela dentro do texto */
.prosa .tab{margin-top:34px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prosa .tab table{width:100%;border-collapse:collapse}
.prosa .tab th{background:var(--navy);color:#fff;text-align:left;padding:14px 18px;
  font-family:var(--f);font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.prosa .tab td{padding:14px 18px;border-top:1px solid var(--line);font-size:16.5px;color:var(--prosa)}
.prosa .tab tbody tr:first-child td{border-top:none}
.prosa .tab td:first-child{color:var(--navy)}

/* chamada da ferramenta */
.chama{
  margin-top:44px;border:1px solid var(--line);border-radius:14px;padding:28px 30px;background:#fff;
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
}
.chama .txt{flex:1 1 300px}
.chama .txt h3{font-family:var(--f);font-size:20px;color:var(--navy);font-weight:700}
.chama .txt p{font-family:var(--f-texto);font-size:15.5px;color:var(--meta);margin-top:6px;
  max-width:52ch;line-height:1.55}
.chama .btn{flex:none}

.rodape-artigo{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--f-texto);font-size:14px;color:var(--meta);line-height:1.6;max-width:70ch;
}

/* leia também */
.leia-tambem{background:var(--soft);padding:72px 0}
.leia-tambem .wrap{max-width:1080px}
.leia-tambem h2{font-size:clamp(24px,3vw,32px)}
.leia-tambem .posts{grid-template-columns:repeat(3,1fr);margin-top:32px}
.leia-tambem .post{background:#fff}

/* faixa final */
.faixa-assine{background:linear-gradient(155deg,var(--navy),var(--navy-2));color:#fff;padding:72px 0}
.faixa-assine .wrap{max-width:1080px;display:flex;flex-wrap:wrap;gap:32px;
  align-items:center;justify-content:space-between}
.faixa-assine h2{color:#fff;max-width:20ch}
.faixa-assine p{font-family:var(--f-texto);font-size:17px;color:#9dc4da;margin-top:12px;
  max-width:46ch;line-height:1.6}
.faixa-assine .dupla{flex:none}

/* ══════════ responsivo ══════════ */
@media(max-width:940px){
  .posts,.leia-tambem .posts{grid-template-columns:1fr 1fr}
  .capa-conteudo{padding:56px 0 8px}
  .destaque-post{padding:34px 28px;margin-top:36px}
  .leia-tambem{padding:56px 0}
  .faixa-assine{padding:56px 0}
}
@media(max-width:680px){
  .posts,.leia-tambem .posts{grid-template-columns:1fr}
  .artigo{padding-bottom:56px}
  .prosa{font-size:17px}
  .resposta-curta{padding:26px 24px}
  .lei,.caixa{padding:22px 22px}
  .chama{flex-direction:column;align-items:stretch}
  .chama .btn{width:100%}
  .faixa-assine .dupla{width:100%}
  .faixa-assine .dupla .btn{width:100%}
  /* tabela larga rola dentro do próprio quadro; a página nunca rola de lado */
  .ref-tabela,.prosa .tab{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ref-tabela table,.prosa .tab table{min-width:560px}
  .ref-tabela th,.prosa .tab th{padding:13px 15px}
  .ref-tabela td,.prosa .tab td{padding:13px 15px;font-size:15.5px}
  /* sem o aviso, quem lê no celular não descobre que existe mais coluna à direita */
  .dica-tabela{display:flex}
}