/* Valenton — folha compartilhada das páginas institucionais estáticas
   (legal-terms.html, legal-privacy.html, help.html).
   Mesmos tokens do index.html, para o usuário não sentir troca de produto ao sair da landing.
   Mobile-first: o base é celular; larguras maiores só GANHAM colunas via @media. */

:root{
  --ink:#121A26;
  --ink-soft:#4B5563;
  --ink-faint:#6B7280;
  --paper:#EEF0F3;
  --surface:#FFFFFF;
  --surface-alt:#F7F8FA;
  --line:#DBDFE5;
  --line-strong:#C4C9D1;
  --navy:#000799;
  --navy-soft:#1C2FC0;
  --accent:#00E4FF;
  --accent-soft:#CFF7FF;
  --accent-ink:#00596B;
  --green:#2F6B4F;
  --red:#A6402F;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --tap:48px;
  --header-h:58px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-top:env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Vem antes de qualquer display:flex/grid — senão o atributo hidden não esconde nada. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Nunito Sans', system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Baloo 2', system-ui, sans-serif; letter-spacing:-0.01em; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--navy-soft); outline-offset:2px; border-radius:4px; }
.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; vertical-align:middle; }

/* Salto direto pro conteúdo — primeiro tab stop da página (WCAG 2.4.1). */
.skip-link{
  position:absolute; left:12px; top:-100px; z-index:400;
  background:var(--navy); color:#fff; padding:12px 16px; border-radius:var(--radius-sm);
  font-weight:700; font-size:14px;
}
.skip-link:focus{ top:calc(12px + var(--safe-top)); text-decoration:none; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 18px; }
@media (min-width:700px){ .wrap{ padding:0 24px; } }

/* ---------- Header ---------- */
.doc-header{
  position:sticky; top:0; z-index:200;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding-top:var(--safe-top);
}
.doc-header .wrap{ display:flex; align-items:center; gap:12px; height:var(--header-h); }
.doc-brand{ display:flex; align-items:center; flex:0 0 auto; }
.doc-brand img{ height:48px; width:auto; }
.doc-header-spacer{ flex:1 1 auto; }
.doc-header-link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:0 12px; border-radius:var(--radius-sm);
  font-size:14.5px; font-weight:700; color:var(--navy);
}
.doc-header-link:hover{ background:var(--surface-alt); text-decoration:none; }
.doc-header-link .material-symbols-outlined{ font-size:20px; }
.doc-header-link.is-quiet{ color:var(--ink-soft); font-weight:600; }
/* No celular o cabeçalho fica só com Voltar: os outros destinos vivem no rodapé. */
@media (max-width:520px){
  .doc-header-link .doc-header-link-text{ display:none; }
  .doc-header-link.is-quiet{ display:none; }
}

/* ---------- Título ---------- */
.doc-hero{ background:var(--surface); border-bottom:1px solid var(--line); padding:26px 0 24px; }
.doc-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft);
  padding:5px 10px; border-radius:999px;
}
.doc-eyebrow .material-symbols-outlined{ font-size:15px; }
.doc-hero h1{ margin:12px 0 6px; font-size:30px; line-height:1.15; }
.doc-meta{ font-size:13.5px; color:var(--ink-faint); }
@media (min-width:900px){ .doc-hero{ padding:38px 0 32px; } .doc-hero h1{ font-size:38px; } }

/* ---------- Layout: conteúdo + índice ---------- */
.doc-layout{ padding:22px 0 56px; }
.doc-layout .wrap{ display:flex; flex-direction:column; gap:22px; }
@media (min-width:1000px){
  .doc-layout .wrap{ flex-direction:row-reverse; align-items:flex-start; gap:36px; }
  .doc-toc{ flex:0 0 258px; position:sticky; top:calc(var(--header-h) + 20px); }
  .doc-main{ flex:1 1 auto; min-width:0; }
}

/* Índice: <details> no mobile (fechado), lista fixa no desktop. */
.doc-toc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden;
}
.doc-toc > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  min-height:var(--tap); padding:0 14px;
  font-weight:700; font-size:14.5px;
}
.doc-toc > summary::-webkit-details-marker{ display:none; }
.doc-toc > summary .doc-toc-chevron{ margin-left:auto; transition:transform .15s ease; }
.doc-toc[open] > summary .doc-toc-chevron{ transform:rotate(180deg); }
.doc-toc ol{ margin:0; padding:2px 8px 10px 8px; list-style:none; counter-reset:toc; }
.doc-toc li{ counter-increment:toc; }
.doc-toc a{
  display:flex; gap:8px; padding:9px 8px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:var(--ink-soft); line-height:1.35;
}
.doc-toc a::before{ content:counter(toc) "."; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.doc-toc a:hover{ background:var(--surface-alt); color:var(--navy); text-decoration:none; }
.doc-toc a[aria-current="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
@media (min-width:1000px){
  .doc-toc > summary{ cursor:default; pointer-events:none; }
  .doc-toc > summary .doc-toc-chevron{ display:none; }
}

/* ---------- Corpo do documento ---------- */
.doc-main{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px 18px 26px;
}
@media (min-width:700px){ .doc-main{ padding:30px 34px 38px; } }
.doc-main > section + section{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.doc-main h2{
  margin:0 0 10px; font-size:21px; line-height:1.25;
  display:flex; align-items:baseline; gap:9px;
}
.doc-main h2 .doc-sec-num{ font-size:14px; font-weight:700; color:var(--navy); font-family:'Nunito Sans', sans-serif; flex:0 0 auto; }
.doc-main h3{ margin:20px 0 8px; font-size:17px; }
.doc-main p{ margin:0 0 12px; max-width:72ch; }
.doc-main ul, .doc-main ol{ margin:0 0 14px; padding-left:22px; max-width:72ch; }
.doc-main li{ margin-bottom:7px; }
.doc-main li::marker{ color:var(--ink-faint); }
.doc-main strong{ font-weight:700; }
.doc-main p:last-child, .doc-main ul:last-child, .doc-main ol:last-child{ margin-bottom:0; }

/* Tabela (dados tratados, prazos). Rola sozinha; a página nunca rola na horizontal. */
.doc-table-scroll{ overflow-x:auto; margin:0 0 14px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.doc-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.doc-table th, .doc-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc-table th{ background:var(--surface-alt); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.doc-table tr:last-child td{ border-bottom:none; }

/* Bloco de destaque (aviso, contato do encarregado). */
.doc-note{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--surface-alt); border:1px solid var(--line); border-left:3px solid var(--navy);
  border-radius:var(--radius-sm); padding:13px 15px; margin:0 0 14px; max-width:72ch;
}
.doc-note .material-symbols-outlined{ color:var(--navy); font-size:21px; flex:0 0 auto; }
.doc-note > div{ min-width:0; }
.doc-note p{ margin:0 0 6px; }
.doc-note p:last-child{ margin-bottom:0; }
.doc-note.is-warn{ border-left-color:var(--red); }
.doc-note.is-warn .material-symbols-outlined{ color:var(--red); }

/* Campo a preencher antes de publicar (razão social, CNPJ, e-mail do encarregado). */
.doc-fill{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.92em; font-weight:600;
  background:#FDF3D6; border:1px dashed #C9A227; color:#6B5200;
  padding:1px 6px; border-radius:5px; white-space:nowrap;
}

/* ---------- Definição (glossário) ---------- */
.doc-dl{ margin:0 0 14px; max-width:72ch; }
.doc-dl dt{ font-weight:700; margin-top:12px; }
.doc-dl dt:first-child{ margin-top:0; }
.doc-dl dd{ margin:2px 0 0; color:var(--ink-soft); }

/* ---------- Rodapé ---------- */
.doc-footer{ background:#121A26; color:#C6CBD3; padding:26px 0 calc(26px + var(--safe-bottom)); font-size:13.5px; }
.doc-footer a{ color:#fff; }
.doc-footer-links{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px; }
.doc-footer-links a{ font-weight:600; min-height:34px; display:inline-flex; align-items:center; }
.doc-footer-bottom{ border-top:1px solid #26303F; padding-top:14px; }

/* ---------- Voltar ao topo ---------- */
.doc-top-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:26px;
  min-height:var(--tap); font-weight:700; font-size:14.5px; color:var(--navy);
}