/* pgrpcmso.com.br — base compartilhada.
   Paleta e logotipo conforme o manual da marca (_marca/), Archivo 400/600/700.

   ⚠️ POR QUE A ESCALA DE RISCO NAO USA VERMELHO
   O vermelho #ec3013 e a cor de IDENTIDADE e de ACAO (o "e" do logotipo, os
   botoes, os links). Se o grau de risco 4 tambem fosse vermelho, uma pilula de
   dado e um botao de CTA passariam a ser a mesma categoria visual. Por isso a
   escala corre em verde -> oliva -> ocre -> marrom, e o grau 4 se distingue
   tambem pelo PESO: e a unica pilula de fundo solido. Severidade lida por
   forma, nao so por matiz. */

:root{
  --ground:#F3F2F2; --surface:#FFF; --surface-2:#EAE8E8; --inset:#F8F7F7;
  --ink:#201E1D; --ink-soft:#605D5D; --ink-faint:#8A8686;
  --rule:#D9D5D5; --rule-soft:#E9E6E6;
  --accent:#EC3013; --accent-ink:#FFF; --accent-soft:#FCE7E2;
  --gr1:#2E6B45; --gr2:#75661A; --gr3:#96520F; --gr4:#6B2317;
  --gr1-bg:#E4EFE8; --gr2-bg:#F0EDDB; --gr3-bg:#F5E8D9; --gr4-bg:#6B2317;
  --gr4-ink:#FFF1EE;
  --shadow:0 1px 2px rgba(32,30,29,.05),0 10px 30px -20px rgba(32,30,29,.35);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#201E1D; --surface:#2A2827; --surface-2:#333030; --inset:#242221;
  --ink:#FFF; --ink-soft:#D7D3D3; --ink-faint:#9B9595;
  --rule:#413D3C; --rule-soft:#332F2E;
  --accent:#FF9783; --accent-ink:#201E1D; --accent-soft:#3B221D;
  --gr1:#7FC397; --gr2:#C6B767; --gr3:#D9A066; --gr4:#F0B4A6;
  --gr1-bg:#1B2E22; --gr2-bg:#2D2A17; --gr3-bg:#33251612; --gr3-bg:#332516;
  --gr4-bg:#6B2317; --gr4-ink:#FFE9E4;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -20px rgba(0,0,0,.85);
}}
:root[data-theme="dark"]{
  --ground:#201E1D; --surface:#2A2827; --surface-2:#333030; --inset:#242221;
  --ink:#FFF; --ink-soft:#D7D3D3; --ink-faint:#9B9595;
  --rule:#413D3C; --rule-soft:#332F2E;
  --accent:#FF9783; --accent-ink:#201E1D; --accent-soft:#3B221D;
  --gr1:#7FC397; --gr2:#C6B767; --gr3:#D9A066; --gr4:#F0B4A6;
  --gr1-bg:#1B2E22; --gr2-bg:#2D2A17; --gr3-bg:#332516;
  --gr4-bg:#6B2317; --gr4-ink:#FFE9E4;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -20px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.6 "Public Sans",-apple-system,Segoe UI,Roboto,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.wrap{max-width:940px;margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
a{color:var(--accent)}

/* ---- logotipo: manual da marca, Archivo 700, o "e" o unico em vermelho ---- */
.marca{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-decoration:none;color:inherit}
.marca__logo{display:flex;align-items:baseline;font-family:"Archivo",sans-serif;
  font-weight:700;font-size:26px;line-height:1;letter-spacing:-.045em;color:var(--ink)}
.marca__e{font-weight:400;font-size:.735em;padding:0 .04em;color:var(--accent)}
.marca__assinatura{font-family:"Archivo",sans-serif;font-size:6.5px;font-weight:600;
  letter-spacing:.285em;text-transform:uppercase;color:var(--ink-soft)}
.marca:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
/* A regra do manual ("abaixo de 20px, sem assinatura") existe por falta de
   espaco. Neste layout ela nao se aplica: o botao do cabecalho e alto, e sobra
   espaco vertical sob o logotipo. Entao a assinatura FICA nos dois lugares, no
   corpo minimo de 20px e com o letter-spacing reduzido que o manual preve.
   O que cede em tela estreita e o texto do botao, nao a marca. */
@media(max-width:640px){
  .marca__logo{font-size:20px}
  .marca__assinatura{letter-spacing:.24em}
  .top .wrap{gap:12px}
  .top .cta{padding:10px 14px;letter-spacing:.06em}
}
@media(max-width:400px){
  .top .cta{font-size:11.5px;padding:9px 11px}
  .marca__assinatura{letter-spacing:.18em;font-size:6px}
}

/* ---- topo ---- */
header.top{border-bottom:1px solid var(--rule);background:var(--surface)}
.top .wrap{display:flex;align-items:center;gap:16px;
  padding-block:calc(26px * .72)}          /* respiro = altura do P */
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.top nav a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none}
.top nav a:hover{color:var(--accent)}
.top nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.top .cta{background:var(--accent);color:var(--accent-ink);padding:11px 17px;border-radius:3px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}
.top .cta:hover{filter:brightness(1.07)}
@media(max-width:700px){.top nav .oculta{display:none}}

/* ---- rodape ----
   ⚠️ O RODAPE E SEMPRE ESCURO, NOS DOIS TEMAS. E a versao de fundo escuro da
   marca: logotipo branco com o "e" em #FF9783, como manda o manual (o #EC3013
   perde contraste no escuro). Por isso ele tem tokens PROPRIOS, fixos, em vez
   de herdar os da pagina — no tema escuro o fundo da pagina tambem e #201E1D,
   e sem o filete de topo os dois se fundiriam. */
footer{
  --f-bg:#201E1D; --f-ink:#FFF; --f-soft:#D7D3D3; --f-faint:#9E9897;
  --f-rule:#3B3736; --f-accent:#FF9783;
  background:var(--f-bg);color:var(--f-soft);
  border-top:1px solid var(--f-rule);margin-top:26px;
  padding:44px 0 0;font-size:14.5px}
footer .marca__logo{color:var(--f-ink)}
footer .marca__e{color:var(--f-accent)}
footer .marca__assinatura{color:var(--f-soft)}
footer .marca:focus-visible{outline-color:var(--f-accent)}
.foot-grid{display:grid;gap:30px;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  padding-bottom:32px}
@media(max-width:700px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.foot-sobre .marca{margin-bottom:13px}
.foot-sobre p{margin:0;max-width:42ch;line-height:1.55}
.foot-col h4{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--f-faint);margin:0 0 11px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-col a{color:var(--f-soft);text-decoration:none;border-bottom:1px solid transparent}
.foot-col a:hover{color:var(--f-accent);border-bottom-color:var(--f-accent)}
.foot-col a:focus-visible{outline:2px solid var(--f-accent);outline-offset:3px;border-radius:2px}
.foot-legal{border-top:1px solid var(--f-rule);padding:22px 0 38px;font-size:13px;
  color:var(--f-faint);display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.foot-legal p{margin:0;max-width:62ch;line-height:1.55}
.foot-legal strong{color:var(--f-soft);font-weight:600}
.assinatura{margin-left:auto;white-space:nowrap;font-size:12.5px}
.assinatura a{color:var(--f-faint);text-decoration:none;border-bottom:1px solid var(--f-rule)}
.assinatura a:hover{color:var(--f-accent);border-bottom-color:var(--f-accent)}
@media(max-width:700px){.assinatura{margin-left:0}}

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