/* ══════════════════════════════════════════════
   VELUNE — páginas de documentos
   Folha própria, enxuta: documento legal é para LER, não para
   impressionar. Nada de canvas, fundo animado ou paralaxe aqui —
   só a identidade da marca aplicada a texto longo.
   ══════════════════════════════════════════════ */

@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fontes/Sora-600.woff2") format("woff2")}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fontes/Sora-700.woff2") format("woff2")}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fontes/SpaceGrotesk-400.woff2") format("woff2")}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fontes/SpaceGrotesk-600.woff2") format("woff2")}

:root{
  --rose:#EDC5D9; --lilac:#CAA2E0; --sky:#93BEE0;
  --grad:linear-gradient(120deg,var(--rose) 0%,var(--lilac) 51%,var(--sky) 100%);
  --ink:#0A0814;
  --linha:rgba(202,162,224,.16);
  --txt:#E8E4F2;
  /* alinhados com o styles.css: 4,5:1 contra todos os fundos do site */
  --txt-dim:#B9B2D2;
  --txt-mute:#9A93B9;
  --aviso:#F0C98C;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(120% 60% at 50% 0%, #171238 0%, transparent 60%),
    var(--ink);
  background-attachment:fixed;
  color:var(--txt);
  font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  font-size:16.5px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--rose);text-decoration:none;border-bottom:1px solid rgba(237,197,217,.3)}
a:hover{border-bottom-color:var(--rose)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:5px}

/* ── topo ── */
.topo{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px clamp(20px,5vw,48px);
  background:rgba(10,8,20,.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linha);
}
.topo img{height:44px;width:auto}
.topo a{border:0}
.topo nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.topo nav a{
  padding:7px 14px;border-radius:99px;font-size:14px;color:var(--txt-dim);border:0;
  transition:.25s;
}
.topo nav a:hover{color:var(--txt);background:rgba(202,162,224,.12)}
.topo nav a[aria-current="page"]{color:#0B0916;background:var(--grad);font-weight:600}

/* ── documento ──
   Medida de leitura curta de propósito: texto legal longo em linha
   larga cansa e faz o olho perder a linha. */
.doc{max-width:72ch;margin:0 auto;padding:clamp(36px,6vw,72px) clamp(20px,5vw,32px) 96px}
.doc__eyebrow{
  font-family:'Sora',sans-serif;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--txt-mute);display:block;margin-bottom:14px;
}
.doc h1{
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,44px);
  line-height:1.12;letter-spacing:-.03em;margin-bottom:10px;text-wrap:balance;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.doc__data{color:var(--txt-mute);font-size:14px;margin-bottom:40px}

.doc h2{
  font-family:'Sora',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.02em;
  margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--linha);
  text-wrap:balance;
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{font-family:'Sora',sans-serif;font-weight:600;font-size:17px;margin:26px 0 10px}
.doc p{margin-bottom:16px;color:var(--txt-dim)}
.doc strong{color:var(--txt);font-weight:600}
.doc ul,.doc ol{margin:0 0 18px 22px;color:var(--txt-dim)}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--lilac)}

/* campo a preencher antes de publicar */
.preencher{
  background:rgba(240,201,140,.14);
  border-bottom:1px dashed rgba(240,201,140,.6);
  color:var(--aviso);padding:1px 5px;border-radius:3px;
  font-weight:600;font-size:.94em;
}

/* nota de revisão jurídica */
.nota{
  margin:26px 0;padding:18px 20px;border-radius:14px;
  background:rgba(240,201,140,.08);
  border:1px solid rgba(240,201,140,.28);
  border-left:3px solid var(--aviso);
}
.nota p{margin:0;color:#E6D3B4;font-size:14.5px}
.nota p + p{margin-top:10px}
.nota strong{color:var(--aviso)}

/* ── rodapé ── */
.rodape{
  border-top:1px solid var(--linha);
  padding:32px clamp(20px,5vw,48px);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--txt-mute);
}
.rodape a{color:var(--txt-mute);border:0}
.rodape a:hover{color:var(--rose)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ══════════════════════════════════════════════
   GUIAS
   Mesma base dos documentos: leitura longa pede medida curta e
   pouca distração. O que muda são a listagem e os blocos técnicos.
   ══════════════════════════════════════════════ */

/* ── listagem ── */
.lista{max-width:900px;margin:0 auto;padding:clamp(36px,6vw,72px) clamp(20px,5vw,32px) 96px}
.lista h1{
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,44px);
  line-height:1.12;letter-spacing:-.03em;margin-bottom:12px;text-wrap:balance;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lista__intro{color:var(--txt-dim);max-width:60ch;margin-bottom:44px}
.guias{display:grid;gap:14px}
.guia{
  display:block;padding:24px 26px;border-radius:18px;border:0;
  background:rgba(202,162,224,.05);
  border:1px solid var(--linha);
  transition:.35s cubic-bezier(.16,1,.3,1);
}
.guia:hover{background:rgba(202,162,224,.10);border-color:rgba(202,162,224,.34);transform:translateY(-2px)}
.guia h2{
  font-family:'Sora',sans-serif;font-weight:600;font-size:19px;color:var(--txt);
  margin-bottom:7px;letter-spacing:-.01em;
}
.guia p{color:var(--txt-dim);font-size:14.5px;margin:0}
.guia__meta{
  display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-mute);margin-bottom:10px;
}
.guia--breve{opacity:.55;pointer-events:none}
.guia--breve .guia__meta{color:var(--aviso)}

/* ── artigo ── */
.doc__meta{
  display:flex;gap:16px;flex-wrap:wrap;color:var(--txt-mute);font-size:13.5px;
  margin-bottom:38px;padding-bottom:22px;border-bottom:1px solid var(--linha);
}
.doc figure{margin:26px 0}
.doc figcaption{color:var(--txt-mute);font-size:13px;margin-top:8px}

/* bloco de comparação lado a lado */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.versus > div{
  padding:20px 22px;border-radius:16px;
  background:rgba(202,162,224,.05);border:1px solid var(--linha);
}
.versus h3{margin-top:0}
.versus ul{margin-left:18px;margin-bottom:0}
@media(max-width:720px){ .versus{grid-template-columns:1fr} }

/* trecho de código / caminho de arquivo */
.doc code{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:.88em;background:rgba(202,162,224,.12);
  padding:2px 7px;border-radius:5px;color:#DCC8EE;
}
.doc pre{
  background:rgba(8,6,18,.7);border:1px solid var(--linha);
  border-radius:14px;padding:18px 20px;margin:0 0 20px;
  overflow-x:auto;                     /* trecho largo rola sozinho, sem empurrar a página */
}
.doc pre code{background:none;padding:0;font-size:13.5px;line-height:1.7;color:#CFC4E4}

/* chamada para o Discord no fim do artigo */
.fecho{
  margin:52px 0 0;padding:30px 32px;border-radius:20px;
  background:linear-gradient(150deg,rgba(202,162,224,.13),rgba(147,190,224,.05));
  border:1px solid rgba(202,162,224,.26);
}
.fecho h2{margin:0 0 8px;border:0;padding:0;font-size:20px}
.fecho p{margin-bottom:18px}
.fecho a.btn{
  display:inline-block;padding:13px 26px;border-radius:99px;border:0;
  background:var(--grad);color:#0A0813;font-weight:600;font-size:14.5px;
}