/* Fontes da identidade nova da Pixel. Ver ../identidade-visual.md */
@font-face {
  font-family: 'Instrument Serif'; font-weight: 400; font-style: normal;
  font-display: swap; src: url(/fonts/instrument-serif.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Serif'; font-weight: 400; font-style: italic;
  font-display: swap; src: url(/fonts/instrument-serif-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Hellauw'; font-weight: 300; font-style: normal;
  font-display: swap; src: url(/fonts/hellauw-300.woff2) format('woff2');
}
@font-face {
  font-family: 'Hellauw'; font-weight: 600; font-style: normal;
  font-display: swap; src: url(/fonts/hellauw-600.woff2) format('woff2');
}

/* Fontes-reserva ajustadas para ocuparem o MESMO espaço das reais. Sem isto,
   o texto "pula" quando a fonte real termina de carregar. */
@font-face {
  font-family: 'Hellauw-fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 105.23%; ascent-override: 71.27%;
  descent-override: 23.76%; line-gap-override: 9.50%;
}
@font-face {
  font-family: 'Instrument-fallback'; font-style: normal;
  src: local('Georgia');
  size-adjust: 75.80%; ascent-override: 130.60%;
  descent-override: 40.90%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument-fallback'; font-style: italic;
  src: local('Georgia Italic'), local('Georgia');
  size-adjust: 75.80%; ascent-override: 130.60%;
  descent-override: 40.90%; line-gap-override: 0%;
}

/* Tokens iguais aos do teste-tecnico-gestor-midia.html, que é o padrão visual
   da Pixel para peça longa. Duas coisas definem esse sistema:
   as linhas são douradas e translúcidas, não brancas, e não existe canto
   arredondado em lugar nenhum. */
:root {
  --preto: #050308;
  --roxo: #1B0F2E;
  --roxo-marca: #2E1A47;
  --dourado: #E0A570;
  --dourado-2: #C98F58;
  --texto: #EFEFEF;
  --apoio: #AEB7C5;
  --linha: rgba(224, 165, 112, 0.16);
  --linha-fraca: rgba(239, 239, 239, 0.09);
  --card: rgba(46, 26, 71, 0.34);
  --erro: #E5544A;
  --serif: 'Instrument Serif', 'Instrument-fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Hellauw', 'Hellauw-fallback', 'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --max: 1080px;
}

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

/* O atributo hidden do HTML esconde via display:none, mas com prioridade
   baixíssima: qualquer regra nossa que defina display (um .login com grid,
   por exemplo) passa por cima e o elemento continua aparecendo. O !important
   aqui garante que hidden signifique escondido, sempre. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.025em;
  color: var(--texto);
  background: var(--preto);
  /* Gradiente vertical fixo, não radial: o fundo escurece de cima para baixo e
     não acompanha a rolagem, o que dá a sensação de peça impressa. */
  background-image: linear-gradient(180deg, #050308 0%, #120A20 38%, #1B0F2E 100%);
  background-attachment: fixed;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Dourado metálico oficial da marca (do PIXEL_DOURADO.svg).
   Só em título grande: em texto pequeno o gradiente suja a leitura. */
.ouro {
  color: var(--dourado);
  background: linear-gradient(0deg, #b79270 0%, #f2c99f 19%, #9d7d5e 43%, #d4a77e 67%, #efbc8e 77%, #f3c08e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

img { max-width: 100%; display: block; }