/* Termos e Privacidade do Greefo. A mesma identidade da página de entrada
   (index.html): papel, tinta, grifo verde-limão, laranja de ação, contorno de
   2 px e sombra dura. Fica em arquivo separado porque as duas páginas usam o
   mesmo estilo, e nenhuma delas leva script. */
@font-face{font-family:Bricolage;src:url(/site/fontes/BricolageGrotesque_400Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Bricolage;src:url(/site/fontes/BricolageGrotesque_600SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Bricolage;src:url(/site/fontes/BricolageGrotesque_800ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Newsreader;src:url(/site/fontes/Newsreader_400Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Newsreader;src:url(/site/fontes/Newsreader_400Regular_Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(/site/fontes/Newsreader_600SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:DMMono;src:url(/site/fontes/DMMono_400Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:DMMono;src:url(/site/fontes/DMMono_500Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --papel:#F3F0E8; --caixa:#FFFFFF; --tinta:#111111; --suave:#635D52; --linha:#DDD8CC;
  --marca:#E4FF3A; --acento:#FF4D1A; --destaque:#B83A0C;
  --raio:16px;
  --titulo:Bricolage,"Arial Black",system-ui,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --mono:DMMono,ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.55 var(--titulo);overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px}
footer :focus-visible{outline-color:var(--marca)}
.env{max-width:820px;margin:0 auto;padding:0 20px}
.pular{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--papel);padding:12px 16px;border-radius:8px;z-index:9}
.pular:focus{left:8px}

/* ---------- topo ---------- */
.barra-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.logo{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:800 26px/1 var(--titulo);letter-spacing:-.04em}
.logo span{background:var(--marca);border:2px solid var(--tinta);border-radius:10px;padding:5px 10px 7px;transform:rotate(-2deg)}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:2px solid var(--tinta);border-radius:12px;
  font:800 15px/1 var(--titulo);text-decoration:none;color:var(--tinta);background:var(--caixa);box-shadow:3px 3px 0 var(--tinta);
  transition:transform .12s ease,box-shadow .12s ease}
.botao:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.botao:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}

/* ---------- a folha ---------- */
main{padding:10px 0 72px}
.rotulo{font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
h1{font:800 clamp(38px,9vw,60px)/.98 var(--titulo);letter-spacing:-.035em;margin:10px 0 14px}
.grifo{background:var(--marca);padding:0 .12em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lide{font:400 clamp(19px,2.4vw,22px)/1.45 var(--serif);color:#2B2822;max-width:32em}
.aviso{display:flex;gap:12px;align-items:flex-start;margin:26px 0 8px;padding:14px 16px;background:var(--acento);
  border:2px solid var(--tinta);border-radius:var(--raio);box-shadow:4px 4px 0 var(--tinta)}
.aviso strong{font:800 18px/1.2 var(--titulo);letter-spacing:-.01em;display:block}
.aviso span{font:400 14px/1.45 var(--mono)}
.indice{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.indice a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--tinta);border-radius:999px;background:var(--caixa);
  font:500 12.5px var(--mono);letter-spacing:.04em;text-decoration:none}
.indice a:hover{background:var(--marca)}

.parte{margin-top:28px;padding:22px 20px 24px;background:var(--caixa);border:2px solid var(--tinta);border-radius:var(--raio);box-shadow:4px 4px 0 var(--tinta)}
.parte h2{font:800 clamp(24px,4vw,30px)/1.08 var(--titulo);letter-spacing:-.025em;margin-bottom:12px}
.parte h3{font:600 18px/1.25 var(--titulo);margin:20px 0 6px}
.parte p,.parte li{font:400 18.5px/1.58 var(--serif);color:#201E1A}
.parte p+p{margin-top:12px}
.parte ul{margin:10px 0 0;padding-left:1.15em}
.parte li{margin-top:7px}
.parte li::marker{color:var(--destaque)}
.parte a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.parte a:hover{background:var(--marca)}
.parte b,.parte strong{font-weight:600}
.nao{list-style:none;padding-left:0 !important}
.nao li{padding-left:1.5em;position:relative}
.nao li::before{content:"×";position:absolute;left:0;top:-.04em;font:800 20px/1.5 var(--titulo);color:var(--destaque)}

/* a tabela do que é guardado: vira uma pilha de cartões no celular */
.guarda{width:100%;border-collapse:collapse;margin-top:14px}
.guarda th{text-align:left;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);padding:0 12px 8px 0;border-bottom:2px solid var(--tinta)}
.guarda td{vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--linha);font:400 17px/1.5 var(--serif)}
.guarda td:first-child{font:600 16px/1.35 var(--titulo);width:34%}
.guarda tr:last-child td{border-bottom:0}
@media (max-width:620px){
  .guarda,.guarda tbody,.guarda tr,.guarda td{display:block;width:100%}
  .guarda thead{display:none}
  .guarda tr{padding:12px 0;border-bottom:1px solid var(--linha)}
  .guarda tr:last-child{border-bottom:0}
  .guarda td{border:0;padding:0}
  .guarda td:first-child{width:100%;margin-bottom:4px}
}

.contato{background:var(--marca)}
.contato p{font:400 19px/1.5 var(--serif)}
.contato .email{display:inline-block;margin-top:8px;font:800 clamp(18px,4.6vw,24px)/1.2 var(--titulo);letter-spacing:-.02em;word-break:break-word}
.data{margin-top:26px;font:400 12.5px/1.5 var(--mono);color:var(--suave)}

/* ---------- rodapé ---------- */
footer{background:var(--tinta);color:var(--papel);padding:36px 0 44px}
.rodape{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;max-width:1160px}
.rodape .logo span{color:var(--tinta)}
.rodape nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.rodape nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.rodape nav a:hover,.rodape nav a[aria-current]{color:var(--marca);text-decoration:underline;text-underline-offset:4px}
.rodape p{width:100%;font:400 12.5px/1.5 var(--mono);color:#B9B3A6}

@media (min-width:720px){
  .parte{padding:28px 30px 30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .botao{transition:none}
}
@media print{
  footer,.barra-topo .botao,.indice{display:none}
  .parte,.aviso{box-shadow:none}
}