/* =========================================================
   PARKINSANS, servida pelo proprio site.

   Deixou de vir do Google Fonts: a tipografia e da marca e nao
   ha razao para o navegador de quem visita ter de contactar um
   terceiro para a ver. Menos uma ligacao para fora, e a pagina
   de cookies fica com menos uma coisa a declarar.

   Ficheiros em woff, sub-conjunto de Latim basico, Latim-1 e
   Latim Estendido-A. Cobre as seis linguas do site, incluindo o
   trema e o o barrado do estonio. Cada peso ficou em 17 KB, os
   cinco somam 100 KB.

   font-display:swap: o texto aparece na letra do sistema e troca
   quando a fonte chega. Ninguem fica a olhar para um ecra vazio
   a espera de uma letra.

   O desenho usa pesos 400 a 800, e a familia so vai ate 700. O
   700 declara-se para 700 e 800, para o navegador usar o Bold
   real em vez de engordar as letras por conta propria.
   ========================================================= */
@font-face{
  font-family:"Parkinsans"; font-style:normal; font-weight:300;
  font-display:swap; src:url("../fonts/Parkinsans-Light.woff") format("woff");
}
@font-face{
  font-family:"Parkinsans"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/Parkinsans-Regular.woff") format("woff");
}
@font-face{
  font-family:"Parkinsans"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../fonts/Parkinsans-Medium.woff") format("woff");
}
@font-face{
  font-family:"Parkinsans"; font-style:normal; font-weight:600;
  font-display:swap; src:url("../fonts/Parkinsans-SemiBold.woff") format("woff");
}
@font-face{
  font-family:"Parkinsans"; font-style:normal; font-weight:700 800;
  font-display:swap; src:url("../fonts/Parkinsans-Bold.woff") format("woff");
}

/* =========================================================
   BASE. Variaveis, tipografia, reset, e o tema preto e branco.
   Este ficheiro entra em todas as paginas do site.
   O tema troca por [data-tema="mono"] na tag html, sem recarregar.
   ========================================================= */
:root{
  /* Paleta de marca, brandbook p.20 */
  --nieve:#F2F3F7; --cielo:#A8CCDD; --cian:#6AA5D2; --azul:#4F7CC1; --coral:#F3714A;
  --hondo:#23477E; --azul-txt:#2C5697; --coral-txt:#B84418;
  /* O coral puro em linha da 2.89:1 sobre branco e fica abaixo do
     minimo de 3:1 para elementos de interface. Este e o tom mais
     proximo que passa, e passa tambem sobre nieve: 3.34 e 3.02. */
  --coral-bd:#E8633B;
  /* Borda para usar sobre nieve, nao sobre branco. A borda normal
     da 3.09:1 sobre branco mas so 2.78:1 sobre nieve, e falha o
     minimo de 3:1 para elementos de interface. */
  --bd-sup:#7A8AA1;
  --tinta:#14213A; --tinta-2:#4A5D75; --tinta-3:#5F7083;

  --fondo:#FFFFFF; --sup:#F2F3F7; --bd:#DDE3EC; --bd-f:#8494AB;
  --grad-hero:linear-gradient(128deg,#1C3A69 0%,#23477E 42%,#3A63A2 100%);
  --grad-marca:linear-gradient(90deg,#F2F3F7 0%,#A8CCDD 24%,#6AA5D2 48%,#4F7CC1 74%,#F3714A 100%);
  --grad-azul:linear-gradient(135deg,#4F7CC1 0%,#23477E 100%);
  --grad-cielo:linear-gradient(135deg,#F2F3F7 0%,#A8CCDD 100%);
  --grad-coral:linear-gradient(135deg,#F3714A 0%,#F2946F 100%);
  --grad-mixto:linear-gradient(135deg,#4F7CC1 0%,#8C6E93 52%,#F3714A 100%);
  --sombra:0 1px 2px rgba(20,33,58,.05),0 14px 32px rgba(20,33,58,.08);
  --on-coral:#1A0D07;
  --hero-sec:#DCE7F5;

  --f:"Parkinsans",system-ui,-apple-system,sans-serif;
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:40px; --e6:48px; --e8:64px; --e10:80px;
  --r:18px; --ancho:1140px; --tap:48px;
}

/* ---------- Versao preto e branco. So variaveis, zero regra nova ---------- */
[data-tema="mono"]{
  --nieve:#F2F2F2; --cielo:#D9D9D9; --cian:#BFBFBF; --azul:#262626; --coral:#000000;
  --hondo:#000000; --azul-txt:#1A1A1A; --coral-txt:#000000;
  --coral-bd:#000000;
  --bd-sup:#666666;
  --tinta:#000000; --tinta-2:#404040; --tinta-3:#595959;
  --fondo:#FFFFFF; --sup:#F2F2F2; --bd:#D9D9D9; --bd-f:#666666;
  --grad-hero:linear-gradient(128deg,#000000 0%,#1A1A1A 42%,#333333 100%);
  --grad-marca:linear-gradient(90deg,#F2F2F2 0%,#BFBFBF 24%,#8C8C8C 48%,#404040 74%,#000000 100%);
  --grad-azul:linear-gradient(135deg,#404040 0%,#000000 100%);
  --grad-cielo:linear-gradient(135deg,#F2F2F2 0%,#D9D9D9 100%);
  --grad-coral:linear-gradient(135deg,#000000 0%,#333333 100%);
  --grad-mixto:linear-gradient(135deg,#404040 0%,#666666 50%,#000000 100%);
  --on-coral:#FFFFFF;
  --hero-sec:#E0E0E0;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--f); font-size:16px; line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.1; text-wrap:balance; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; border-radius:12px; }
/* Quem pediu menos movimento nao leva movimento nenhum, nem
   transicoes nem animacoes. A roleta continua a funcionar, so
   deixa de piscar. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px; }
.sec{ padding-block:var(--e8); }
.sec--sup{ background:var(--sup); }

@media (min-width:1000px){
  body{ font-size:16.5px; }
  .sec{ padding-block:var(--e10); }
}