/* ============================================================
   SeuGestor — páginas de documento (privacidade, termos, dados)
   Depende dos tokens de styles.css
   ============================================================ */

.doc-nav{
  position:sticky;top:0;z-index:100;padding:16px 0;
  background:var(--bg-glass);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line);
}
.doc-nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.doc-back{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);transition:color .35s var(--e-out),gap .35s var(--e-out)}
.doc-back svg{width:15px;height:15px;transform:rotate(180deg)}
.doc-back:hover{color:var(--blue-300);gap:13px}

.doc-hero{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(38px,5vw,60px);overflow:hidden;border-bottom:1px solid var(--line)}
.doc-hero .orb--a{top:-60%;left:-8%;opacity:.55}
.doc-hero .orb--c{top:-40%;right:-6%;opacity:.5}
.doc-hero__grid{
  position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 80% at 30% 0%,#000 10%,transparent 72%);
}
.doc-hero h1{font-size:clamp(32px,5.4vw,60px);margin:20px 0 16px}
.doc-hero .lede{max-width:60ch}
.doc-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}

.doc-body{padding:clamp(44px,6vw,76px) 0 clamp(70px,9vw,120px);position:relative}
.doc-layout{display:grid;grid-template-columns:236px 1fr;gap:clamp(30px,4.5vw,66px);align-items:start}

.doc-toc{position:sticky;top:96px}
.doc-toc h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);margin-bottom:16px;font-weight:700}
.doc-toc ol{display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.doc-toc a{
  display:block;padding:8px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-4);
  border-left:2px solid transparent;transition:color .3s,background .3s,border-color .3s,padding-left .3s var(--e-out);
}
.doc-toc a:hover{color:var(--ink-2);background:rgba(255,255,255,.03);border-left-color:var(--line-blue);padding-left:16px}
.doc-toc a.on{color:var(--blue-300);border-left-color:var(--blue-500);background:rgba(var(--blue-500-rgb),.07)}

.doc-content{max-width:76ch;min-width:0}
.doc-content section{scroll-margin-top:100px;padding-bottom:clamp(30px,4vw,48px)}
.doc-content section+section{border-top:1px solid var(--line);padding-top:clamp(30px,4vw,48px)}
.doc-content h2{
  font-size:clamp(20px,2.3vw,28px);margin-bottom:18px;display:flex;gap:14px;align-items:baseline;
}
.doc-content h2 .n{
  font-family:var(--f-display);font-size:12px;font-weight:800;color:var(--blue-400);
  letter-spacing:.06em;flex:0 0 auto;padding-top:4px;
}
.doc-content h3{font-size:16px;margin:26px 0 10px;color:var(--ink)}
.doc-content p{color:var(--ink-3);font-size:15px;line-height:1.85;margin-bottom:14px;max-width:none}
.doc-content p strong{color:var(--ink-2);font-weight:600}
.doc-content ul{display:flex;flex-direction:column;gap:10px;margin:6px 0 18px}
.doc-content li{display:flex;gap:12px;color:var(--ink-3);font-size:15px;line-height:1.78}
.doc-content li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-500);flex:0 0 auto;margin-top:11px}
.doc-content li strong{color:var(--ink-2);font-weight:600}
.doc-content a:not(.btn){color:var(--blue-300);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--blue-500-rgb),.4);transition:text-decoration-color .3s}
.doc-content a:not(.btn):hover{text-decoration-color:var(--blue-400)}

.callout{
  position:relative;padding:20px 24px;border-radius:var(--r-md);margin:22px 0;
  background:rgba(var(--blue-500-rgb),.07);border:1px solid var(--line-blue);overflow:hidden;
}
.callout p:last-child{margin-bottom:0}
.callout__t{display:block;font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--blue-300);margin-bottom:8px;text-transform:uppercase}
.callout--warn{background:rgba(245,185,63,.07);border-color:rgba(245,185,63,.26)}
.callout--warn .callout__t{color:var(--amber)}
.callout--fill{background:rgba(255,107,122,.07);border-color:rgba(255,107,122,.3)}
.callout--fill .callout__t{color:var(--rose)}

.doc-table{border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;margin:20px 0;background:var(--bg-card)}
.doc-table__r{display:grid;grid-template-columns:.85fr 1.15fr;border-bottom:1px solid var(--line)}
.doc-table__r:last-child{border-bottom:none}
.doc-table__r--h{background:rgba(255,255,255,.035)}
.doc-table__r>div{padding:14px 18px;font-size:13.6px;color:var(--ink-3);line-height:1.66}
.doc-table__r--h>div{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.doc-table__r>div:first-child{color:var(--ink-2);font-weight:600;border-right:1px solid var(--line)}

.doc-cta{
  margin-top:clamp(38px,5vw,60px);padding:clamp(28px,3.4vw,44px);border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(150deg,rgba(var(--blue-500-rgb),.13),rgba(var(--blue-500-rgb),.03));
  border:1px solid var(--line-blue);position:relative;overflow:hidden;
}
.doc-cta h3{font-size:clamp(19px,2.2vw,26px);margin-bottom:12px}
.doc-cta p{color:var(--ink-3);font-size:14.5px;margin-bottom:22px;max-width:52ch;margin-inline:auto}

@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:34px}
  .doc-toc{position:relative;top:0;padding-bottom:24px;border-bottom:1px solid var(--line)}
  .doc-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  .doc-toc a{border-left:none;border:1px solid var(--line);border-radius:var(--r-full);padding:7px 14px;font-size:12px}
  .doc-toc a:hover,.doc-toc a.on{padding-left:14px;border-color:var(--line-blue)}
}
@media (max-width:600px){
  .doc-table__r{grid-template-columns:1fr}
  .doc-table__r--h{display:none}
  .doc-table__r>div:first-child{border-right:none;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
  .doc-content h2{flex-direction:column;gap:4px}
  .doc-content h2 .n{padding-top:0}
}