/* Shared stylesheet for legal pages — 20 Dicas TG */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Roboto+Mono:wght@400;500;700&display=swap');

:root{
  --ink:#0d0e10;
  --ink-2:#15161a;
  --paper:#f2ede1;
  --paper-2:#e6dfcd;
  --paper-dim:#bdb39c;
  --gold:#c9a24b;
  --red:#c8421f;
  --rule: rgba(242,237,225,0.14);
  --display:"Roboto", system-ui, sans-serif;
  --serif:"Roboto", system-ui, sans-serif;
  --mono:"Roboto Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--ink); color:var(--paper-2); font-family:var(--serif); font-weight:300; -webkit-font-smoothing:antialiased}
body{
  background-image:
    radial-gradient(1000px 700px at 85% -10%, rgba(201,162,75,0.08), transparent 60%),
    radial-gradient(800px 600px at -10% 20%, rgba(200,66,31,0.04), transparent 60%);
  background-attachment: fixed, fixed;
  line-height:1.65;
}
::selection{background:var(--gold); color:var(--ink)}

.wrap{max-width:880px; margin:0 auto; padding:0 28px}

/* Top bar */
.legal-top{border-bottom:1px solid var(--rule); padding:22px 0}
.legal-top .inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.legal-top .brand{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--paper-dim)}
.legal-top .brand img{height:30px; width:auto; filter:invert(1) brightness(2) contrast(0.95)}
.legal-top a.back{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper); text-decoration:none; border:1px solid var(--rule); padding:9px 15px; border-radius:999px}
.legal-top a.back:hover{border-color:var(--gold); color:var(--gold)}

/* Header */
header.doc{padding:72px 0 40px; border-bottom:1px solid var(--rule)}
header.doc .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:20px}
header.doc h1{font-family:var(--display); font-weight:900; letter-spacing:-0.02em; font-size:clamp(40px,6vw,64px); line-height:0.98; color:var(--paper); margin:0}
header.doc .meta{margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper-dim); display:flex; gap:24px; flex-wrap:wrap}
header.doc .meta span::before{content:"●"; color:var(--gold); font-size:7px; margin-right:8px; vertical-align:middle}

/* Intro note */
.note{
  margin:40px 0 0; padding:22px 24px; border:1px dashed var(--gold);
  background:rgba(201,162,75,0.04); border-radius:2px;
  font-size:15px; color:var(--paper-2);
}
.note b{color:var(--gold); font-weight:500}

/* TOC */
.toc{margin:40px 0 0; padding:0; list-style:none; columns:2; column-gap:40px}
.toc li{margin:0 0 10px; break-inside:avoid}
.toc a{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--paper-dim); text-decoration:none}
.toc a:hover{color:var(--gold)}
.toc a b{color:var(--gold); font-weight:500; margin-right:10px}

/* Sections */
main{padding:8px 0 80px}
section.clause{padding:48px 0 0; scroll-margin-top:24px}
section.clause h2{
  font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1; color:var(--paper); margin:0 0 20px;
  display:flex; gap:16px; align-items:baseline;
}
section.clause h2 .n{font-family:var(--mono); font-size:13px; color:var(--gold); font-weight:500; flex-shrink:0}
section.clause h3{font-family:var(--display); font-weight:500; font-size:18px; color:var(--paper); margin:28px 0 10px}
section.clause p{font-size:16px; margin:0 0 16px; color:var(--paper-2)}
section.clause ul{margin:0 0 18px; padding:0; list-style:none}
section.clause ul li{position:relative; padding-left:24px; margin:0 0 10px; font-size:16px; color:var(--paper-2)}
section.clause ul li::before{content:""; position:absolute; left:0; top:11px; width:12px; height:1px; background:var(--gold)}
section.clause strong, section.clause b{color:var(--paper); font-weight:500}
section.clause em{color:var(--gold); font-style:italic}
section.clause a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.placeholder{color:var(--red); font-family:var(--mono); font-size:0.9em; background:rgba(200,66,31,0.08); padding:1px 6px; border-radius:3px}

.highlight-box{
  margin:24px 0; padding:24px 26px; border:1px solid var(--gold); border-radius:2px;
  background:rgba(201,162,75,0.05);
}
.highlight-box h3{margin-top:0}

/* Footer */
footer.legal{padding:40px 0 64px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-dim)}
footer.legal .f-grid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
footer.legal a{color:var(--paper); text-decoration:none}
footer.legal a:hover{color:var(--gold)}
footer.legal b{color:var(--paper); font-weight:500}

@media (max-width:680px){
  .toc{columns:1}
  header.doc{padding:48px 0 32px}
}