/* ===================================================================
   Estilo das páginas de texto (Privacidade, Termos).
   Os tokens são os MESMOS da landing e do painel médico. A landing traz o
   CSS embutido porque é uma página só e cada requisição a menos conta no
   primeiro carregamento; aqui compensa a folha externa, porque são duas
   páginas e o navegador reaproveita entre elas.
   =================================================================== */

/* As mesmas duas variáveis da landing, um arquivo cada. */
@font-face{font-family:'Inter';src:url('fonts/inter.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('fonts/serif4.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#eef1f6; --card:#ffffff; --surface-3:#e9eef7;
  --line:#dde4ef; --line-strong:#c3cddd;
  --txt:#1c2b4a; --txt-2:#5a6478; --txt-3:#5f6a82; --muted:#8a94a6;
  --navy:#1c2b4a; --navy-2:#16213c;
  --gold:#b89160; --gold-2:#a87f4e; --brand-plate:#ffffff; --brand-navy-txt:#1f3b5c;
  --accent:#f5a623; --accent-strong:#e79915; --accent-text:#8a5f10;
  --accent-line:#e0b878; --tint-accent:#fff5e2; --tint-accent-strong:#ffecc6;
  --shadow-rgb:28,43,74; --line-rgb:228,232,240; --accent-rgb:245,166,35; --bg-rgb:238,241,246;
  --shadow:0 12px 30px rgba(var(--shadow-rgb),.10),0 2px 5px rgba(var(--shadow-rgb),.05);
  --card-grad:linear-gradient(180deg,#ffffff 0%,#f9fbfe 100%);
  --fundo-arte:
    radial-gradient(1200px 640px at 92% -10%, rgba(245,166,35,.14), transparent 58%),
    radial-gradient(1100px 780px at 50% 112%, rgba(28,43,74,.12), transparent 62%);
  --radius:16px; --radius-sm:12px;
  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --pad:20px;
}
/* Escuro é o PADRÃO, e não a preferência do aparelho: não há @media aqui. O
   bloco :root acima segue sendo o tema claro, e só entra quando o visitante
   escolhe claro no botão. Como :not([data-theme="light"]) tem especificidade
   maior que :root, ele vence sem !important, e vale também sem JS. */
:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0d1320; --card:#161d2e; --surface-3:#1a2234;
  --line:#2a3448; --line-strong:#3c4962;
  --txt:#e7ecf6; --txt-2:#b6c0d4; --txt-3:#9ba6bd; --muted:#8592ab;
  --navy:#16203a; --navy-2:#101728;
  --gold:#c9a878; --gold-2:#d8bc93; --brand-navy-txt:#dfe6f2;
  --accent-strong:#f7b955; --accent-text:#f2bf72;
  --accent-line:#6d5423; --tint-accent:#241c0e; --tint-accent-strong:#2f2411;
  --shadow-rgb:0,0,0; --line-rgb:42,52,72; --bg-rgb:13,19,32;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --card-grad:linear-gradient(180deg,#192134 0%,#141b2b 100%);
  --fundo-arte:
    radial-gradient(1200px 640px at 92% -10%, rgba(245,166,35,.07), transparent 58%),
    radial-gradient(1100px 760px at 50% 112%, rgba(0,0,0,.42), transparent 62%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);overflow-wrap:break-word;
  font:400 16px/1.7 var(--font);-webkit-font-smoothing:antialiased}
/* A mesma lavagem de fundo da landing. position:fixed, e não
   background-attachment, que obriga a repintar o fundo a cada quadro. */
body::before{content:'';position:fixed;inset:0;z-index:-10;pointer-events:none;
  background:var(--fundo-arte)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 var(--pad)}
.icn{flex:none;width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Cabeçalho ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid rgba(var(--line-rgb),.9)}
.hd{display:flex;align-items:center;gap:14px;height:68px;
  width:100%;max-width:960px;margin:0 auto;padding:0 var(--pad)}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
  background:var(--brand-plate);box-shadow:0 6px 16px rgba(var(--shadow-rgb),.16);flex:none}
.brand-mark svg{width:26px;height:26px}
.brand-word{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.5px;
  line-height:1;color:var(--brand-navy-txt)}
.brand-word b{color:var(--gold-2);font-weight:600}
.hd-acoes{display:flex;align-items:center;gap:8px;margin-left:auto}
.voltar{display:none;align-items:center;gap:8px;padding:11px 15px;border-radius:10px;
  font-size:14px;font-weight:500;color:var(--txt-2);text-decoration:none;min-height:44px}
.voltar:hover{background:var(--surface-3);color:var(--txt)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:11px;border:1px solid var(--line);background:var(--card);
  color:var(--txt-2);cursor:pointer}
.icon-btn:hover{color:var(--txt);border-color:var(--line-strong)}
.icon-btn .icn{width:19px;height:19px}
.ico-sun{display:none}
:root:not([data-theme="light"]) .ico-moon{display:none}
:root:not([data-theme="light"]) .ico-sun{display:block}

/* ---------- Texto ---------- */
.doc{padding:44px 0 72px}
/* Mesma hierarquia da landing: manchete na serifa, corpo na sans. */
.doc h1,.doc h2{font-family:var(--display);font-optical-sizing:auto}
.doc h1{font-size:clamp(29px,6.6vw,41px);letter-spacing:-.018em;line-height:1.12}
.selo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);
  background:var(--tint-accent-strong);border:1px solid var(--accent-line);
  padding:7px 13px;border-radius:999px;margin-bottom:20px}
.data{margin-top:14px;font-size:14px;color:var(--muted)}
.resumo{margin-top:26px;padding:20px 22px;background:var(--card-grad);
  border:1px solid rgba(var(--line-rgb),.9);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);color:var(--txt-2);font-size:15.5px}
.doc h2{font-size:21px;margin:44px 0 14px;scroll-margin-top:84px;letter-spacing:-.012em}
.doc h3{font-size:16px;margin:26px 0 10px}
.doc p{margin-top:14px;color:var(--txt-2)}
.doc p:first-of-type{margin-top:0}
.doc ul{margin-top:14px;display:grid;gap:10px}
/* O marcador é absoluto, e o item NÃO é flex. Com flex, um <strong> no começo
   da frase virava um item de flex com largura própria: o trecho em negrito
   ficava numa coluna estreita e o resto do texto escorria ao lado. */
.doc li{position:relative;padding-left:19px;color:var(--txt-2)}
.doc li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;
  border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.doc strong{color:var(--txt);font-weight:600}
.doc a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:2px}
.aviso{margin-top:20px;padding:16px 18px;border-radius:var(--radius-sm);
  background:var(--tint-accent);border:1px solid var(--accent-line);
  color:var(--txt-2);font-size:15px}
.aviso strong{color:var(--accent-text)}

/* Índice no topo do documento */
.indice{margin-top:30px;padding:20px 22px;background:var(--surface-3);
  border:1px solid rgba(var(--line-rgb),.9);border-radius:var(--radius-sm)}
.indice p{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3)}
.indice ol{display:grid;gap:2px;counter-reset:i}
.indice a{display:block;padding:7px 0;font-size:15px;color:var(--txt-2);
  text-decoration:none;counter-increment:i}
.indice a::before{content:counter(i) ". ";color:var(--muted)}
.indice a:hover{color:var(--accent-text)}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--card-grad);border-top:1px solid var(--line);padding:34px 0}
.ft{display:grid;gap:16px;font-size:14px;color:var(--txt-2)}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.ft nav a{color:var(--txt-2);text-decoration:none;padding:7px 0;min-height:44px;
  display:inline-flex;align-items:center}
.ft nav a:hover{color:var(--accent-text)}
.ft-nota{font-size:12.5px;color:var(--txt-3);max-width:72ch}

@media (min-width:640px){
  :root{--pad:32px}
  .voltar{display:inline-flex}
  .doc{padding:60px 0 88px}
  .ft{grid-template-columns:1fr auto;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}