/* Base de todas as páginas: fontes, cores (tema claro e escuro), tipografia, espaços,
   movimento e o esqueleto (topo, conteúdo, rodapé).

   Identidade visual e regras de interface: docs/19-identidade-visual.md.
   Componente reutilizável vai em css/componentes/; estilo de uma página, em css/paginas/.
   Cores, espaços e fontes só pelas variáveis daqui: nunca um "#fff" ou "13px" solto. */

/* ================================================================ fontes
   Servidas pelo próprio site: a CSP não permite fontes de fora, e assim nenhum
   visitante tem o IP enviado a terceiros. Licença OFL, em static/fontes/. */
@font-face {
  font-family: "Archivo";
  src: url("../fontes/archivo/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Serifada de revista, só no ranking da Forbes. O navegador só baixa o arquivo na página que a usa. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fontes/playfair-display/playfair-display-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ================================================================ tema claro (padrão) */
:root {
  color-scheme: light;

  /* Superfícies: o "papel" do sistema. */
  --cor-fundo: #ffffff;
  --cor-fundo-faixa: #f5f6f3;
  --cor-superficie: #ffffff;
  --cor-superficie-suave: #f3f4f1;
  --cor-realce: #eceee9;
  --cor-veu: rgb(12 16 14 / 0.46);
  --cor-papel: #fdfdfa;

  /* Linhas. */
  --cor-borda: #e1e4de;
  --cor-borda-forte: #c6cbc3;
  --cor-grade: rgb(17 22 20 / 0.05);

  /* Texto. */
  --cor-texto: #111614;
  --cor-texto-secundario: #434b47;
  --cor-texto-suave: #646c68;

  /* Marca: o verde do plenário. */
  --cor-marca: #0b6e4f;
  --cor-marca-forte: #08573e;
  --cor-marca-suave: #e4f1eb;
  --cor-sobre-marca: #ffffff;
  --cor-ouro: #986a12;
  --cor-ouro-suave: #f6eddb;

  /* Estados. */
  --cor-sucesso: #13804f;
  --cor-sucesso-suave: #e2f2e9;
  --cor-erro: #b42318;
  --cor-erro-suave: #fbe8e6;
  --cor-alerta: #9c5a06;
  --cor-alerta-suave: #fbefdb;
  --cor-info: #1f5fad;
  --cor-info-suave: #e5edf9;

  /* Painel eletrônico: cores dos votos, iguais em todo o jogo. */
  --cor-voto-sim: #139158;
  --cor-voto-nao: #d0382e;
  --cor-voto-abstencao: #c9951e;
  --cor-voto-ausente: #cfd4cc;
  --cor-cadeira: #dde1da;

  /* Blue, a rede social do jogo (paródia do Twitter): o azul da marca e as cores das ações. */
  --cor-blue: #1a8cd8;
  --cor-blue-curtida: #d61a6f;
  --cor-blue-repostagem: #00875a;

  /* Faixa invertida: a seção de destaque, escura mesmo no tema claro. */
  --cor-inverso-fundo: #0d1411;
  --cor-inverso-superficie: #141d19;
  --cor-inverso-borda: rgb(255 255 255 / 0.1);
  --cor-inverso-texto: #edf2ef;
  --cor-inverso-suave: #95a59c;
  --cor-inverso-marca: #3cc58f;
  --cor-inverso-sim: #3cc58f;
  --cor-inverso-nao: #f2675c;
  --cor-inverso-alerta: #e2b85a;

  /* Sombras e foco. */
  --sombra-1: 0 1px 2px rgb(17 22 20 / 0.06);
  --sombra-2: 0 1px 2px rgb(17 22 20 / 0.04), 0 12px 28px -14px rgb(17 22 20 / 0.22);
  --sombra-3: 0 2px 6px rgb(17 22 20 / 0.06), 0 36px 72px -28px rgb(17 22 20 / 0.38);
  --anel-foco: 0 0 0 3px rgb(11 110 79 / 0.26);

  /* Tipografia. */
  --fonte-texto: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fonte-serifada: "Playfair Display", Georgia, serif;
  --texto-2xs: 0.6875rem;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4rem);
  --titulo-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --titulo-md: clamp(1.875rem, 1.3rem + 2.3vw, 3rem);
  --titulo-lg: clamp(2.25rem, 1.3rem + 3.8vw, 4.25rem);
  --titulo-xl: clamp(2.75rem, 0.9rem + 7vw, 7.25rem);
  --entrelinha-titulo: 1.02;
  --entrelinha-texto: 1.55;
  --tracado-titulo: -0.03em;
  --tracado-rotulo: 0.09em;

  /* Espaços (múltiplos de 4px). */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-9: 96px;
  --espaco-10: 128px;
  --espaco-secao: clamp(72px, 11vw, 152px);

  /* Cantos. Sistema operacional: cantos pequenos. */
  --raio-1: 4px;
  --raio-2: 8px;
  --raio-3: 12px;
  --raio-4: 20px;
  --raio-pilula: 999px;

  /* Movimento. */
  --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duracao-1: 120ms;
  --duracao-2: 200ms;
  --duracao-3: 320ms;
  --duracao-4: 560ms;
  --duracao-5: 900ms;

  /* Esqueleto. */
  --largura-maxima: 1240px;
  --margem-lateral: clamp(16px, 4vw, 40px);
  --altura-topo: 64px;

  /* Camadas. */
  --camada-topo: 50;
  --camada-flutuante: 60;
  --camada-dialogo: 100;
  --camada-aviso: 120;
}

/* ================================================================ tema escuro
   Escolhido no botão do topo; o servidor já manda a página no tema certo (cookie "tema"). */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --cor-fundo: #0a0e0c;
  --cor-fundo-faixa: #0d1210;
  --cor-superficie: #111714;
  --cor-superficie-suave: #151c18;
  --cor-realce: #1b2420;
  --cor-veu: rgb(0 0 0 / 0.62);
  /* Papel (cédula, documento impresso) continua claro no tema escuro, só um pouco mais baixo. */
  --cor-papel: #e6ebe7;

  --cor-borda: #212a25;
  --cor-borda-forte: #34403a;
  --cor-grade: rgb(233 238 235 / 0.045);

  --cor-texto: #e8eeea;
  --cor-texto-secundario: #b6c0ba;
  --cor-texto-suave: #8a958e;

  --cor-marca: #3cc58f;
  --cor-marca-forte: #62d8a6;
  --cor-marca-suave: rgb(60 197 143 / 0.13);
  --cor-sobre-marca: #03140c;
  --cor-ouro: #e2b85a;
  --cor-ouro-suave: rgb(226 184 90 / 0.13);

  --cor-sucesso: #3cc58f;
  --cor-sucesso-suave: rgb(60 197 143 / 0.13);
  --cor-erro: #f2675c;
  --cor-erro-suave: rgb(242 103 92 / 0.13);
  --cor-alerta: #e9a846;
  --cor-alerta-suave: rgb(233 168 70 / 0.13);
  --cor-info: #6aa6ef;
  --cor-info-suave: rgb(106 166 239 / 0.13);

  --cor-voto-sim: #2fbf7f;
  --cor-voto-nao: #f0574c;
  --cor-voto-abstencao: #e2b85a;
  --cor-voto-ausente: #2a342f;
  --cor-cadeira: #222b26;

  --cor-blue: #1d9bf0;
  --cor-blue-curtida: #f91880;
  --cor-blue-repostagem: #00ba7c;

  /* No tema escuro, a faixa invertida ganha um fundo esverdeado para continuar em destaque. */
  --cor-inverso-fundo: #0f2119;
  --cor-inverso-superficie: #142b21;
  --cor-inverso-borda: rgb(60 197 143 / 0.18);
  --cor-inverso-suave: #9db3a7;
  --cor-inverso-marca: #56d8a2;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 32px -16px rgb(0 0 0 / 0.7);
  --sombra-3: 0 2px 8px rgb(0 0 0 / 0.4), 0 40px 80px -24px rgb(0 0 0 / 0.85);
  --anel-foco: 0 0 0 3px rgb(60 197 143 / 0.34);
}

/* ================================================================ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + var(--espaco-4));
  scrollbar-color: var(--cor-borda-forte) transparent;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  line-height: var(--entrelinha-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 680;
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracado-titulo);
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

p {
  text-wrap: pretty;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--cor-marca);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cor-marca-forte);
}

strong,
b {
  font-weight: 650;
}

small {
  font-size: var(--texto-sm);
}

code,
kbd,
samp {
  font-family: var(--fonte-mono);
  font-size: 0.9em;
}

hr {
  height: 1px;
  margin: var(--espaco-6) 0;
  border: 0;
  background: var(--cor-borda);
}

::selection {
  color: var(--cor-sobre-marca);
  background: var(--cor-marca);
}

:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--cor-borda-forte);
  border: 3px solid var(--cor-fundo);
  border-radius: var(--raio-pilula);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Com o diálogo aberto, a página de trás não rola. */
html.tem-dialogo-aberto {
  overflow: hidden;
}

/* ================================================================ utilitários */
.recipiente {
  width: 100%;
  max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

/* Some da tela, mas continua para leitores de tela. */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Rótulo técnico, em mono e caixa alta: o "carimbo" do sistema. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.mono {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.numero {
  font-variant-numeric: tabular-nums;
}

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Link "pular para o conteúdo": aparece só para quem navega pelo teclado. */
.pular-para-conteudo {
  position: absolute;
  top: var(--espaco-2);
  left: var(--espaco-2);
  z-index: calc(var(--camada-aviso) + 1);
  padding: var(--espaco-2) var(--espaco-4);
  color: var(--cor-sobre-marca);
  background: var(--cor-marca);
  border-radius: var(--raio-2);
  transform: translateY(-160%);
  transition: transform var(--duracao-2) var(--curva-saida);
}

.pular-para-conteudo:focus {
  transform: none;
}

/* ================================================================ marca */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cor-texto);
  text-decoration: none;
}

.marca:hover {
  color: var(--cor-texto);
}

.marca__simbolo {
  width: 30px;
  height: 30px;
  flex: none;
}

.marca__simbolo-fundo {
  fill: var(--cor-marca);
}

.marca__simbolo-traco {
  fill: none;
  stroke: var(--cor-sobre-marca);
  stroke-width: 2;
  stroke-linecap: round;
}

.marca__simbolo-ponto {
  fill: var(--cor-sobre-marca);
}

.marca__nome {
  font-size: 1.0625rem;
  font-weight: 750;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* ================================================================ marcas do jogo
   componentes/_marcas_do_jogo.html. O tamanho acompanha a fonte de quem as contém. */
.marca-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--cor-texto);
}

.marca-blue__simbolo {
  width: 1.3em;
  height: 1.3em;
  fill: var(--cor-blue);
}

.logotipo-forbes {
  width: auto;
  height: 1em;
  fill: currentColor;
}

/* ================================================================ topo */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--camada-topo);
  background: color-mix(in srgb, var(--cor-fundo) 82%, transparent);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  transition: border-color var(--duracao-3), background-color var(--duracao-3);
}

/* A linha do topo aparece quando a página rola (base.js marca o html). */
html[data-rolou] .topo {
  border-bottom-color: var(--cor-borda);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
  height: var(--altura-topo);
}

.topo__navegacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-left: var(--espaco-4);
}

.topo__link {
  padding: 6px 10px;
  font-size: var(--texto-sm);
  font-weight: 520;
  color: var(--cor-texto-secundario);
  text-decoration: none;
  border-radius: var(--raio-2);
  transition: color var(--duracao-2), background-color var(--duracao-2);
}

.topo__link:hover {
  color: var(--cor-texto);
  background: var(--cor-realce);
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-left: auto;
}

/* O botão de menu só aparece no celular (o .botao dos componentes não pode vencer). */
.topo__acoes .topo__menu-botao {
  display: none;
}

@media (max-width: 900px) {
  .topo__navegacao {
    position: absolute;
    top: calc(var(--altura-topo) - 1px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--espaco-2) var(--margem-lateral) var(--espaco-4);
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-2);
  }

  .topo[data-menu-aberto] .topo__navegacao {
    display: flex;
    animation: surgir-de-cima var(--duracao-3) var(--curva-saida);
  }

  .topo__link {
    padding: 12px 4px;
    font-size: var(--texto-md);
    border-bottom: 1px solid var(--cor-borda);
    border-radius: 0;
  }

  .topo__acoes .topo__menu-botao {
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  .topo__cta {
    display: none;
  }
}

/* ================================================================ conteúdo e rodapé */
.conteudo {
  flex: 1;
  width: 100%;
}

/* Páginas comuns (painel, erros): conteúdo dentro de uma coluna com respiro. */
.conteudo--coluna {
  max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding: var(--espaco-7) var(--margem-lateral) var(--espaco-9);
}

.cartao {
  padding: var(--espaco-6);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}

.cartao > * + * {
  margin-top: var(--espaco-4);
}

.rodape {
  padding: var(--espaco-8) 0 var(--espaco-6);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: var(--espaco-7);
}

.rodape__texto {
  max-width: 44ch;
  margin-top: var(--espaco-4);
}

.rodape__lista {
  display: grid;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

.rodape__lista a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
}

.rodape__lista a:hover {
  color: var(--cor-texto);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-top: var(--espaco-8);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
}

@media (max-width: 720px) {
  .rodape__grade {
    grid-template-columns: 1fr 1fr;
  }

  .rodape__grade > :first-child {
    grid-column: 1 / -1;
  }
}

/* ================================================================ revelar ao rolar
   Elementos com data-revelar entram suaves quando aparecem na tela (base.js).
   Sem JavaScript, ficam visíveis: o estado escondido só vale com a classe "js". */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duracao-5) var(--curva-saida),
    transform var(--duracao-5) var(--curva-saida);
  transition-delay: calc(var(--atraso, 0) * 90ms);
}

.js [data-revelar="esquerda"] {
  transform: translateX(-28px);
}

.js [data-revelar="escala"] {
  transform: scale(0.96);
}

.js [data-revelar].esta-visivel {
  opacity: 1;
  transform: none;
}

/* ================================================================ animações compartilhadas */
@keyframes surgir-de-cima {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes surgir-de-baixo {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes pulsar {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Troca de tema com um círculo que se abre a partir do botão (base.js). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ================================================================ menos movimento
   Quem pede menos movimento no sistema vê tudo pronto, sem animação. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-revelar] {
    opacity: 1;
    transform: none;
  }
}