/* Clênio Denardini Advocacia: holerite em formulário contínuo (LEITURA.md, seção 5). Nível SV N4. */
:root {
  --fundo: #fbfbf7;          /* papel */
  --mesa: #e4e6e0;           /* fundo atrás da folha, aparece nos furos */
  --tinta: #171717;
  --suave: #5c6259;
  --marca: #171717;
  --marca-2: #f2df74;
  --linha: #c6ccc2;
  --zebra: #e5eee0;
  --grifo: #f2df74;
  --preto: #111111;
  --cartao: #ffffff;
  --raio: 4px;
  --fonte-titulo: "Literata", Georgia, serif;
  --fonte-texto: "Karla", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --margem: 46px;            /* trilho de furos de cada lado */
}
body { background: var(--mesa); color: var(--tinta); font-family: var(--fonte-texto); font-size: 17px; line-height: 1.6; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; }
a { color: inherit; }
.botao { border-radius: var(--raio); font-family: var(--fonte-texto); font-weight: 700; }
.botao--vazado { color: var(--tinta); }
.rotulo, .doc-cab, .campos-doc dt, .r__cod, .r__ref, thead th, .bases span, .tv__data, .nota__n, .mensagens__rotulo {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--suave);
}
.rotulo { margin: 0 0 .7rem; }

/* ---------- cabeçalho preto com o logo prata original ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--preto); color: #f2f2f2; transition: transform .35s ease; }
.topo.escondido { transform: translateY(-100%); }
.topo__linha { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 3vw, 40px); }
.topo__logo { display: flex; align-items: center; min-height: 44px; }
.topo__logo img { width: 210px; height: auto; display: block; }
.topo__nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.topo__nav a { text-decoration: none; opacity: .82; padding: 10px 0; }
.topo__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.topo__cta { --b-fundo: #f2f2f2; --b-tinta: #111; padding: .8em 1.15em; font-size: 15px; }

/* ---------- a folha de formulário contínuo ---------- */
.mesa { padding: clamp(18px, 3vw, 44px) clamp(0px, 2vw, 32px) clamp(30px, 4vw, 60px); }
.folha {
  position: relative; max-width: 1320px; margin: 0 auto; background: var(--fundo);
  padding: 0 calc(var(--margem) + clamp(20px, 4vw, 64px));
  box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 18px 40px -30px rgb(0 0 0 / .35);
}
/* trilhos de furos de tração, separados do corpo por uma linha de picote */
.folha::before, .folha::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--margem); pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--mesa) 0 6px, rgb(0 0 0 / .14) 6.6px, transparent 7.4px) 0 12px / 100% 25.4px repeat-y;
}
.folha::before { left: 0; border-right: 1px dashed #cfd3ca; }
.folha::after { right: 0; border-left: 1px dashed #cfd3ca; }
section { position: relative; }

.doc-cab { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; padding: 18px 0 12px; border-bottom: 1.5px solid var(--tinta); color: var(--tinta); }
.sec-cab { max-width: 760px; margin-bottom: 30px; }
.sec-cab h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin: 0 0 .5em; }
.sec-cab p { color: var(--suave); margin: 0; }

/* ---------- hero: cabeçalho do demonstrativo ---------- */
.demo { padding-bottom: clamp(36px, 5vw, 64px); }
.demo__grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-top: clamp(28px, 4vw, 56px); }
.demo h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); margin: 0 0 .35em; max-width: 12ch; }
.demo__sub { font-size: 1.15rem; color: var(--suave); max-width: 46ch; margin: 0 0 1.6rem; }
.demo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.demo__link { font-size: 15.5px; color: var(--suave); text-decoration: underline; text-underline-offset: 4px; padding: 10px 0; }
.demo__link:hover { color: var(--tinta); }
.demo__retrato { margin: 0; position: relative; aspect-ratio: 643 / 800; overflow: hidden; background: #d9dbd6; }
.demo__retrato-in { position: absolute; inset: -4% 0 -8%; }
.demo__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) contrast(1.04); }

/* campos do demonstrativo: impressos numa faixa zebrada, sem caixas nem divisórias */
.campos-doc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 14px 18px; background: var(--zebra); }
.campos-doc > div { padding: 8px 0; min-width: 0; }
.campos-doc dt { margin-bottom: 4px; }
.campos-doc dd { margin: 0; font-size: 16px; line-height: 1.35; }
.campos-doc__para dd { display: flex; gap: 22px; flex-wrap: wrap; }
.campos-doc a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-underline-offset: 4px; min-height: 30px; }
.campos-doc a svg { width: 16px; height: 16px; }

/* ---------- rubricas do trabalhador ---------- */
.rubricas { padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 60px); border-top: 1px solid var(--linha); }
.tabela { border-top: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tinta); color: var(--tinta); }
tbody tr:nth-child(4n+1), tbody tr:nth-child(4n+2) { background: var(--zebra); }
tbody td { padding: 11px 12px; vertical-align: baseline; }
.r__cod { width: 64px; color: var(--suave); }
.r__desc { font-size: 16.5px; }
.r__ref { width: 150px; }
.r__acao { width: 128px; text-align: right; }
.r__acao a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; text-decoration: none; padding: 6px 0; min-height: 36px; }
.r__acao a:hover { text-decoration: underline; text-underline-offset: 4px; }
.r__acao svg { width: 16px; height: 16px; }
tr.nao-consta .r__ref { color: #8a5a00; }
sup { font-family: var(--mono); font-size: 12px; font-weight: 600; margin-left: 3px; }

/* marca-texto: passa uma vez ao entrar (site.js põe .grifado) */
.grifo {
  background-image: linear-gradient(104deg, transparent 0 .2em, var(--grifo) .25em calc(100% - .2em), transparent 100%);
  background-repeat: no-repeat; background-size: 100% 62%; background-position: 0 75%;
  padding: 0 .12em; margin: 0 -.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 1.1s cubic-bezier(.3,.7,.2,1);
}
.com-animacao .grifo:not(.grifado) { background-size: 0% 62%; }

.notas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; }
.notas li { position: relative; padding-left: 30px; font-size: 15px; }
.nota__n { position: absolute; left: 0; top: 2px; color: var(--tinta); font-weight: 600; }
.notas p { margin: 0; }
.notas .nota__fonte { margin-top: 6px; color: var(--suave); font-size: 13.5px; }
.notas a { font-weight: 700; text-underline-offset: 3px; }

/* linha de bases: a nota do Google como Base de cálculo */
.bases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.bases > div { padding: 10px 12px; border-left: 1px solid var(--linha); }
.bases > div:first-child { border-left: 0; }
.bases span { display: block; }
.bases b { font-family: var(--mono); font-weight: 600; font-size: 16px; }
.bases__link { display: flex; align-items: center; }
.bases__link a { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; text-underline-offset: 4px; min-height: 40px; }
.bases__link svg { width: 16px; height: 16px; }

/* ---------- dobra em sanfona entre as duas folhas ---------- */
.dobra {
  height: 72px; margin: 0 calc(-1 * (var(--margem) + clamp(20px, 4vw, 64px)));
  background: linear-gradient(to bottom, var(--fundo) 0%, #eef0ea 38%, #dcdfd7 49.5%, #f6f7f2 50.5%, #f0f1ec 62%, var(--fundo) 100%);
  position: relative;
}
.dobra::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #b8bdb3; }

/* ---------- empresa ---------- */
.empresa { padding-bottom: clamp(40px, 6vw, 80px); }
.empresa__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 52px) 0 clamp(26px, 3vw, 40px); }
.empresa h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); margin: 0 0 .5em; }
.empresa__texto p { color: var(--suave); max-width: 52ch; }
.empresa__texto .botao { margin-top: .6rem; }
.empresa__foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.empresa__foto img { width: 100%; height: 100%; object-fit: cover; }
.rubricas-emp { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; border-top: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); }
.rubricas-emp li { break-inside: avoid; display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; padding: 6px 10px; }
.rubricas-emp li:nth-child(4n+1), .rubricas-emp li:nth-child(4n+2) { background: var(--zebra); }
.rubricas-emp .r__cod { width: auto; }
.rubricas-emp .r__acao { width: 44px; height: 44px; display: grid; place-items: center; }
.rubricas-emp .r__acao svg { width: 18px; height: 18px; }

/* ---------- responsável e lugar ---------- */
.responsavel { padding-bottom: clamp(40px, 6vw, 80px); }
.responsavel__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(28px, 4vw, 52px); align-items: start; }
.responsavel__foto { margin: 0; aspect-ratio: 926 / 1100; overflow: hidden; background: #d9dbd6; }
.responsavel__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); }
.responsavel h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 .3em; }
.responsavel__titulos { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.2rem; margin-top: 0; }
.responsavel__texto > p { color: var(--suave); max-width: 56ch; }
.tv { margin-top: 30px; }
.tv ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.tv li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 15.5px; }
.tv a { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; white-space: nowrap; text-underline-offset: 4px; min-height: 36px; }
.tv a svg { width: 16px; height: 16px; }

.lugar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 5vw, 64px); align-items: end; }
.lugar__fotos { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.lugar__f { overflow: hidden; aspect-ratio: 500 / 554; }
.lugar__f img { width: 100%; height: 100%; object-fit: cover; }
.campos-doc--lugar { grid-template-columns: 1fr; margin: 0; }

/* ---------- contato ---------- */
.contato { padding-bottom: clamp(40px, 6vw, 80px); }
.contato__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(28px, 4vw, 52px); }
.contato h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin: 0 0 .5em; }
.contato__intro p { color: var(--suave); }
.contato__alt a { font-weight: 700; color: var(--tinta); text-underline-offset: 3px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
.campo { display: flex; flex-direction: column; padding: 10px 14px 6px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: #fff; }
.campo--largo, .campo:nth-child(4) { grid-column: 1 / -1; }
.campo span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.campo input, .campo textarea { border: 0; background: transparent; font: inherit; font-size: 16.5px; padding: 6px 0 8px; color: var(--tinta); outline: none; resize: vertical; }
.campo:focus-within { box-shadow: inset 0 -2px 0 var(--tinta); }
.form__enviar { margin-top: 16px; }
.form__ok a { font-weight: 700; }

/* ---------- blog ---------- */
.blog { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--linha); }
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.posts a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.posts img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.posts span { font-family: var(--fonte-titulo); font-size: 1.08rem; line-height: 1.3; }
.posts a:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- campo Mensagens (as perguntas) ---------- */
.mensagens-sec { padding: 10px 0 clamp(48px, 7vw, 90px); }
.mensagens { position: relative; border: 1.5px solid var(--tinta); border-radius: 14px; padding: 30px clamp(18px, 3vw, 36px) 22px; column-count: 2; column-gap: 40px; }
.mensagens__rotulo { position: absolute; top: -.8em; left: 22px; margin: 0; padding: 0 .55em; background: var(--fundo); color: var(--tinta); line-height: 1.5; }
.mensagens p { margin: 0 0 1rem; break-inside: avoid; font-size: 15.5px; }
.mensagens b { font-weight: 700; }
.mensagens__fim a { font-weight: 700; text-underline-offset: 3px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--preto); color: #d8d8d8; }
.rodape__in { max-width: 1320px; margin: 0 auto; padding: 48px clamp(16px, 3vw, 40px) 110px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; font-size: 15px; }
.rodape__logo { width: 230px; height: auto; }
.rodape .rotulo { color: #9a9a9a; margin-top: 0; }
.rodape p { margin: 0 0 1rem; }
.rodape a { text-underline-offset: 3px; }
.rodape__miudo { grid-column: 1 / -1; color: #8a8a8a; font-size: 13px; border-top: 1px solid #2a2a2a; padding-top: 18px; }
.wa-flutuante { background: var(--marca); }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .topo__nav { display: none; }
  .topo__cta { margin-left: auto; }
  .notas { grid-template-columns: 1fr; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --margem: 22px; }
  .folha { padding: 0 calc(var(--margem) + 16px) 0 calc(var(--margem) + 14px); }
  .folha::after { display: none; }
  .folha { padding-right: 16px; }
  .folha::before { background-size: 100% 20px; background-image: radial-gradient(circle at 50% 50%, var(--mesa) 0 4px, rgb(0 0 0 / .14) 4.5px, transparent 5.2px); }
  .dobra { margin: 0 -16px 0 calc(-1 * (var(--margem) + 14px)); }
  .demo__grade, .empresa__grade, .responsavel__grade, .contato__grade, .lugar { grid-template-columns: 1fr; }
  .demo__retrato { aspect-ratio: 4 / 3.6; max-height: 440px; }
  .campos-doc { grid-template-columns: 1fr 1fr; }
  .campos-doc__para { grid-column: 1 / -1; }
  .responsavel__foto { aspect-ratio: 4 / 4.2; max-height: 460px; }
  .rubricas-emp { columns: 1; }
  .rubricas-emp li:nth-child(4n+1), .rubricas-emp li:nth-child(4n+2) { background: none; }
  .rubricas-emp li:nth-child(odd) { background: var(--zebra); }
  .mensagens { column-count: 1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topo__logo img { width: 150px; }
  .topo__cta span { display: none; }
  .topo__cta { padding: 0; width: 44px; height: 44px; border-radius: 50%; }
  .topo__cta svg { width: 22px; height: 22px; }
  .demo h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .demo__acoes .botao { flex: 1 1 100%; }
  .demo__link { padding: 12px 0; }
  .campos-doc { grid-template-columns: 1fr; }
  .doc-cab { font-size: 12px; letter-spacing: .05em; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tbody tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "cod desc desc" "cod ref acao"; column-gap: 8px; padding: 10px 10px 6px; }
  tbody td { padding: 0; width: auto !important; }
  tbody .r__cod { grid-area: cod; padding-top: 3px; }
  tbody .r__desc { grid-area: desc; font-size: 16px; line-height: 1.35; }
  tbody .r__ref { grid-area: ref; align-self: center; font-size: 12px; letter-spacing: .05em; }
  tbody .r__acao { grid-area: acao; text-align: right; }
  tbody .r__acao a { min-height: 44px; }
  .bases { grid-template-columns: 1fr 1fr; }
  .bases > div:nth-child(3) { border-left: 0; }
  .bases > div:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .tv li { grid-template-columns: 1fr; gap: 2px; }
  .lugar__fotos { grid-template-columns: 1fr 1fr; }
  .lugar__f--alta { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .campos { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .posts a { flex-direction: row; align-items: center; }
  .posts img { width: 112px; flex: none; }
  .rodape__in { grid-template-columns: 1fr; padding-bottom: 120px; }
}