/* ═══════════════════════════════════════════════════════════════════
   ATELIÊ 3D — páginas de texto (termos, privacidade)

   A folha do ateliê põe overflow:hidden no body, porque lá a tela é
   uma bancada que não rola. Aqui é o contrário: é documento, e
   documento rola. Por isso esta folha existe separada.

   Mesma estante de pigmentos, mesma tipografia.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --breu:#16121F; --bancada:#201A2D; --bancada-2:#2A2239;
  --risco:#3B3154; --risco-2:#51446F;
  --gesso:#F6F2FF; --poeira:#D2CBE8; --poeira-2:#A79DC4;
  --verdete:#25D9A6; --acafrao:#FFB43D; --coral:#FF6F5C;
  --lilas:#B478FF; --cobalto:#5F8CFF;
  --acafrao-vel:rgba(255,180,61,.14);
  --r:6px; --rg:10px;
}

:root[data-tema="claro"]{
  --breu:#ECE8F0; --bancada:#FAF8F5; --bancada-2:#E9E3EE;
  --risco:#D6CEDF; --risco-2:#B8ACC8;
  --gesso:#302B3B; --poeira:#554D65; --poeira-2:#665C76;
  --verdete:#0B725C; --acafrao:#8A5A00; --coral:#BE2F1E;
  --lilas:#6C34C0; --cobalto:#2649BE;
  --acafrao-vel:rgba(138,90,0,.09);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}

/* O atributo hidden PERDE para qualquer classe que declare display —
   e aqui .planos é grid. Sem esta linha, esconder um bloco por
   hidden não faz nada, e o "Carregando…" fica na tela para sempre.
   A mesma regra existe no estilo.css; faltava nesta folha. */
[hidden]{display:none !important}
em,i,cite,address,dfn,var{font-style:normal}

body{
  background:var(--breu);color:var(--gesso);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:15.5px;line-height:1.65;font-style:normal;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 96px;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 6% 0%,rgba(180,120,255,.10),transparent 62%),
    radial-gradient(ellipse 44% 38% at 97% 6%,rgba(37,217,166,.08),transparent 62%);
}
.folha{position:relative;z-index:1;max-width:760px;margin:0 auto}

a{color:var(--verdete);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--verdete);outline-offset:3px;border-radius:3px}

.volta{
  display:inline-flex;align-items:center;gap:9px;margin:38px 0 30px;
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--poeira-2);
  text-decoration:none;transition:color .16s;
}
.volta:hover{color:var(--gesso)}
.volta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}

h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(34px,5.4vw,52px);line-height:1.05;letter-spacing:-.015em;
  text-wrap:balance;margin-bottom:12px;
}
.data{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--poeira-2);
  margin-bottom:30px;
}

.rascunho{
  border:1px solid rgba(255,180,61,.32);background:var(--acafrao-vel);
  border-radius:var(--rg);padding:15px 17px;margin-bottom:38px;
}
.rascunho b{color:var(--acafrao);display:block;margin-bottom:5px;font-size:14px}
.rascunho p{font-size:13.5px;color:var(--poeira);line-height:1.6}

h2{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(22px,3vw,29px);line-height:1.15;text-wrap:balance;
  margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--risco);
}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:15.5px;font-weight:600;margin:22px 0 7px}

p{margin-bottom:13px;text-wrap:pretty;max-width:68ch}
ul{margin:0 0 14px 20px}
li{margin-bottom:7px;max-width:66ch}
strong{color:var(--gesso);font-weight:600}

.destaque{
  background:var(--bancada);border:1px solid var(--risco);
  border-radius:var(--rg);padding:15px 17px;margin:18px 0;
}
.destaque p:last-child{margin-bottom:0}

code{
  font-family:"DM Mono",ui-monospace,monospace;font-size:.88em;
  background:var(--bancada-2);border:1px solid var(--risco);
  border-radius:4px;padding:1px 5px;color:var(--poeira);
}

.pe{
  margin-top:52px;padding-top:22px;border-top:1px solid var(--risco);
  font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;
  color:var(--poeira-2);line-height:1.7;
}

:root[data-tema="claro"] body::before{
  background:radial-gradient(ellipse 60% 40% at 8% 0%,rgba(180,120,255,.035),transparent 72%);
}
:root[data-tema="claro"] .destaque{box-shadow:0 3px 12px rgba(66,48,88,.035)}
:root[data-tema="claro"] .rascunho{border-color:rgba(138,90,0,.25)}

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