@charset "UTF-8";
/* =========================================================================
   sysINFO - Design System
   Tecnologia no mundo, explicada em português.
   Folha própria e autossuficiente. Até aqui era uma camada aplicada sobre o
   Bootstrap 5.3, carregado por CDN; o Bootstrap saiu do portal porque, medido
   ao vivo no navegador, contribuía com uma única declaração visível em toda a
   página (o reset de <hr>, reescrito aqui). Ver a nota na seção 2 (Base).
   Identidade original: não deriva de nenhum portal existente.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
  /* Institucional */
  --sys-ink-950: #050D18;
  --sys-ink-900: #0A1626;
  --sys-ink-800: #0F2036;
  --sys-ink-700: #16304F;
  --sys-ink-600: #1E4270;

  /* Destaque - azuis retirados do logotipo sysINFO.
     Os nomes com "cyan" são históricos; os valores são os azuis da marca.
     Trocar estes três hexadecimais muda o acento do portal inteiro. */
  --sys-blue: #1B5FD9;
  --sys-blue-600: #1750B8;
  --sys-blue-300: #7FB1FF;
  --sys-cyan: #1E7BFF;      /* azul do "INFO" no logotipo */
  --sys-cyan-400: #4DA3FF;  /* variante clara, para uso sobre fundo escuro */
  --sys-cyan-700: #0B57C7;  /* variante escura, para uso sobre fundo claro */
  --sys-navy-brand: #0B2E63; /* azul-marinho do "sys" no logotipo */

  /* Editorial */
  --sys-paper: #FFFFFF;
  --sys-surface: #F4F7FA;
  --sys-surface-2: #EAF0F6;
  --sys-line: #DCE4EC;
  --sys-line-strong: #C3CFDB;
  --sys-text: #14202E;
  --sys-text-soft: #3D4E62;
  /* Era #64748B, que dá 4,76:1 no branco - passa - mas só 4,43:1 sobre o
     cinza de --sys-surface (#F4F7FA) e 4,15:1 sobre --sys-surface-2. Como este
     token é usado justamente nas legendas que ficam sobre essas superfícies
     (metadados de cartão, status dos módulos, local dos eventos), na prática
     ele reprovava no critério AA em boa parte dos lugares onde aparece.
     #5B6A7D dá 5,52 / 5,14 / 4,81 nos três fundos: passa em todos, e continua
     sendo um cinza claramente secundário em relação ao texto principal. */
  --sys-muted: #5B6A7D;

  /* Semânticas */
  --sys-alert: #C22B25;
  --sys-ok: #0F7B4F;

  /* Papéis */
  --sys-bg: var(--sys-paper);
  --sys-bg-alt: var(--sys-surface);
  --sys-panel: #FFFFFF;
  --sys-border: var(--sys-line);
  --sys-fg: var(--sys-text);
  --sys-fg-soft: var(--sys-text-soft);
  --sys-fg-muted: var(--sys-muted);
  --sys-link: var(--sys-blue-600);
  --sys-link-hover: var(--sys-ink-700);
  --sys-accent: var(--sys-blue);
  /* Cabeçalho claro: o logotipo tem uma metade em azul-marinho que precisa de
     fundo claro para aparecer. Trocar estes tokens muda o topo inteiro. */
  --sys-header-bg: #FFFFFF;
  --sys-header-bg-top: #F4F7FA;
  --sys-header-fg: #0B2E63;
  --sys-header-muted: #5A6B80;
  --sys-header-line: #DCE4EC;
  --sys-header-hover: #EFF4F9;
  --sys-header-panel: #FFFFFF;
  --sys-header-shadow: 0 14px 32px rgba(10, 22, 38, .12);
  --sys-shadow: 0 1px 2px rgba(10, 22, 38, .06), 0 8px 24px rgba(10, 22, 38, .06);
  --sys-shadow-soft: 0 1px 2px rgba(10, 22, 38, .05);

  /* Cor da editoria corrente (sobrescrita por .cat-*) */
  --sys-cat: var(--sys-blue);

  /* Tipografia */
  --sys-font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sys-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sys-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Métrica */
  --sys-radius: 4px;
  --sys-radius-lg: 8px;
  --sys-gap: 1.5rem;
  --sys-rule: 3px;
  --sys-container: 1280px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --sys-bg: #0B1420;
  --sys-bg-alt: #101D2C;
  --sys-panel: #101D2C;
  --sys-border: #22334A;
  --sys-line-strong: #2E4361;
  --sys-fg: #E7EEF6;
  --sys-fg-soft: #C0CEDF;
  --sys-fg-muted: #8DA1B8;
  --sys-link: #8FB9FF;
  --sys-link-hover: #C7DCFF;
  --sys-accent: #4E8CF5;
  --sys-header-bg: #0D1B2B;
  --sys-header-bg-top: #091420;
  --sys-header-fg: #E7EEF6;
  --sys-header-muted: #93A8BF;
  --sys-header-line: rgba(255, 255, 255, .12);
  --sys-header-hover: rgba(255, 255, 255, .09);
  --sys-header-panel: #16273A;
  --sys-header-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --sys-surface: #101D2C;
  --sys-surface-2: #16273A;
  --sys-alert: #F2685F;
  --sys-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .38);
  --sys-shadow-soft: 0 1px 2px rgba(0, 0, 0, .4);
}

/* Cores por editoria - discretas, usadas apenas em fios, tarjas e rótulos */
.cat-inteligencia-artificial { --sys-cat: #6D5BD0; }
.cat-ciberseguranca          { --sys-cat: #B3261E; }
.cat-desenvolvimento         { --sys-cat: #1B5FD9; }
.cat-cloud-infraestrutura    { --sys-cat: #0E7490; }
.cat-dados-analytics         { --sys-cat: #B45309; }
.cat-software-empresarial    { --sys-cat: #475569; }
.cat-startups-negocios       { --sys-cat: #047857; }
.cat-mercado-trabalho        { --sys-cat: #9D174D; }
.cat-produtos-dispositivos   { --sys-cat: #A16207; }
.cat-brasil                  { --sys-cat: #15803D; }
.cat-estados-unidos-big-techs{ --sys-cat: #1D4ED8; }
.cat-europa-regulacao        { --sys-cat: #4338CA; }
.cat-china-asia              { --sys-cat: #B91C1C; }
.cat-america-latina          { --sys-cat: #0F766E; }
/* Estas três foram escurecidas em 31/08/2026. A cor da editoria não serve só
   de enfeite: ela é usada como TEXTO no kicker, no selo e nos rótulos, em
   corpo pequeno. Medido no site, as versões anteriores davam 3,77, 2,94 e
   3,09 de contraste sobre branco, contra os 4,5 que o critério AA pede para
   texto pequeno. Ou seja, os nomes "Open Finance", "Criptomoedas" e "Boas
   Notícias" eram os mais difíceis de ler do site inteiro, justamente por
   serem os mais coloridos.

   As outras quinze editorias já passavam, e ficaram como estavam. Estas três
   mantêm o mesmo matiz - continuam verde, mostarda e verde-limão - só que num
   tom que aguenta ser texto. Antes: #059669, #CA8A04, #65A30D. */
.cat-open-finance            { --sys-cat: #047857; }
.cat-criptomoedas            { --sys-cat: #946004; }
.cat-boas-noticias           { --sys-cat: #4D7C0F; }
.cat-espaco-nasa             { --sys-cat: #5B21B6; }

html[data-theme="dark"] .cat-inteligencia-artificial { --sys-cat: #A99BF0; }
html[data-theme="dark"] .cat-ciberseguranca          { --sys-cat: #F4948C; }
html[data-theme="dark"] .cat-desenvolvimento         { --sys-cat: #7FB1FF; }
html[data-theme="dark"] .cat-cloud-infraestrutura    { --sys-cat: #67D9EE; }
html[data-theme="dark"] .cat-dados-analytics         { --sys-cat: #F2B266; }
html[data-theme="dark"] .cat-software-empresarial    { --sys-cat: #AEBED2; }
html[data-theme="dark"] .cat-startups-negocios       { --sys-cat: #5FD0A6; }
html[data-theme="dark"] .cat-mercado-trabalho        { --sys-cat: #F08FB6; }
html[data-theme="dark"] .cat-produtos-dispositivos   { --sys-cat: #E3B457; }
html[data-theme="dark"] .cat-brasil                  { --sys-cat: #6FD692; }
html[data-theme="dark"] .cat-estados-unidos-big-techs{ --sys-cat: #8FB4FF; }
html[data-theme="dark"] .cat-europa-regulacao        { --sys-cat: #A5A0F5; }
html[data-theme="dark"] .cat-china-asia              { --sys-cat: #F49A9A; }
html[data-theme="dark"] .cat-america-latina          { --sys-cat: #5FD3C8; }
html[data-theme="dark"] .cat-open-finance            { --sys-cat: #6EE7B7; }
html[data-theme="dark"] .cat-criptomoedas            { --sys-cat: #FDE047; }
html[data-theme="dark"] .cat-boas-noticias           { --sys-cat: #BEF264; }
html[data-theme="dark"] .cat-espaco-nasa             { --sys-cat: #C4B5FD; }

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
/* Reset mínimo próprio. Cobria o caso de o Bootstrap não carregar (CDN
   indisponível, rede corporativa restrita); hoje é a base normal do portal,
   porque o Bootstrap foi removido - ver a nota abaixo, na regra do <hr>. */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Compensa a altura do cabeçalho fixo quando um link de âncora é seguido,
     para o título não ficar escondido atrás dele. */
  scroll-padding-top: 108px;
}
body, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

body {
  background: var(--sys-bg);
  color: var(--sys-fg);
  font-family: var(--sys-font-ui);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* "clip" em vez de "hidden": hidden cria um contexto de rolagem e quebra o
     position: sticky do cabeçalho. clip corta o estouro sem criar esse contexto. */
  overflow-x: clip;
}

.sys-container {
  width: 100%;
  max-width: var(--sys-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) { .sys-container { padding-inline: 1.5rem; } }

a { color: var(--sys-link); text-underline-offset: .18em; }
a:hover { color: var(--sys-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sys-font-ui);
  font-weight: 800;
  letter-spacing: -.019em;
  line-height: 1.14;
  color: var(--sys-fg);
  margin: 0;
}

img, svg { max-width: 100%; }
img { height: auto; }

/* O <hr> precisa da regra completa, e não só da cor da borda.
   Até aqui o site carregava o Bootstrap 5.3 inteiro pelo CDN, e foi medido
   no navegador que ele contribuía com exatamente UMA declaração visível em
   toda a página: o reset de <hr>. Todas as demais 1183 regras não casavam
   com nenhum elemento, porque o design system é próprio e usa o prefixo
   sys-. Uma folha de estilo bloqueante, em domínio de terceiro, para
   colorir um filete. O Bootstrap saiu; a regra dele mora aqui agora. */
hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--sys-border);
  color: inherit;
  opacity: 1;
}

::selection { background: var(--sys-cyan-400); color: var(--sys-ink-950); }

:focus-visible {
  outline: 3px solid var(--sys-cyan-700);
  outline-offset: 2px;
  border-radius: 2px;
}
html[data-theme="dark"] :focus-visible { outline-color: var(--sys-cyan-400); }

.sys-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--sys-cyan-400);
  color: var(--sys-ink-950);
  padding: .75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--sys-radius) 0;
}
.sys-skip:focus { left: 0; }

.sys-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   Links externos

   O atributo data-sys-externo="1" é posto por assets/js/sysinfo.js em todo
   link que aponta para fora de sysinfo.com.br, junto com target="_blank".
   Ver o comentário longo naquele arquivo.

   A seta avisa, antes do clique, que o link vai abrir outra aba. Quem usa
   leitor de tela recebe o mesmo aviso em texto, escondido dentro do próprio
   link; por isso a seta aqui é aria-hidden por construção (conteúdo gerado
   por CSS em ::after de um elemento decorativo) e não duplica a informação.

   O nowrap no ::after evita o caso feio de a seta cair sozinha na linha
   seguinte, separada da última palavra do link.
   ---------------------------------------------------------------------- */
a[data-sys-externo="1"]::after {
  content: "\2197";           /* ↗ */
  display: inline-block;
  margin-left: .18em;
  font-size: .82em;
  line-height: 1;
  opacity: .55;
  white-space: nowrap;
}
a[data-sys-externo="1"]:hover::after { opacity: 1; }

/* Onde a seta não faz sentido: links que envolvem imagem ou cartão inteiro,
   botões de compartilhamento e o logotipo. Nesses, o alvo clicável não é uma
   palavra no meio de um texto, e a seta apareceria solta num canto. */
.sys-figure[data-sys-externo="1"]::after,
.sys-share a[data-sys-externo="1"]::after,
.sys-brand[data-sys-externo="1"]::after,
.sys-cta[data-sys-externo="1"]::after { content: none; }

/* -------------------------------------------------------------------------
   3. Cabeçalho
   ---------------------------------------------------------------------- */
/* O cabeçalho acompanha a rolagem. Ao rolar, a faixa de utilidades some e a
   barra da marca encolhe, deixando visíveis apenas o logotipo e as editorias.
   O estado é ligado por JavaScript, que põe data-scrolled="true" no <header>. */
.sys-header {
  background: var(--sys-header-bg);
  color: var(--sys-header-fg);
  border-bottom: var(--sys-rule) solid var(--sys-cyan);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.sys-header[data-scrolled="true"] { box-shadow: 0 6px 20px rgba(10, 22, 38, .12); }
.sys-header[data-scrolled="true"] .sys-header__top { display: none; }
.sys-header[data-scrolled="true"] .sys-header__main-inner { min-height: 56px; }
.sys-header[data-scrolled="true"] .sys-brand__mark { width: 30px; height: 30px; }
.sys-header[data-scrolled="true"] .sys-brand__word { font-size: 1.35rem; }
.sys-header[data-scrolled="true"] .sys-brand__sub { display: none; }
html[data-theme="dark"] .sys-header[data-scrolled="true"] { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }

.sys-header__top {
  background: var(--sys-header-bg-top);
  border-bottom: 1px solid var(--sys-header-line);
  font-size: .75rem;
}
.sys-header__top-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px;
}
.sys-header__date {
  color: var(--sys-header-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  white-space: nowrap;
}
.sys-header__tagline {
  color: var(--sys-header-muted);
  display: none;
  font-style: italic;
}
@media (min-width: 992px) { .sys-header__tagline { display: block; } }

.sys-header__actions { display: flex; align-items: center; gap: .25rem; }

/* Menu institucional na faixa do topo, ao lado da assinatura editorial.
   Um único botão que abre o painel com as nove páginas institucionais. */
.sys-inst { position: relative; }
.sys-inst__caret { width: 10px; height: 10px; opacity: .8; }
.sys-inst[data-open="true"] .sys-iconbtn {
  background: var(--sys-header-hover);
  border-color: var(--sys-header-line);
}
.sys-inst__panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 250px;
  background: var(--sys-header-panel);
  border: 1px solid var(--sys-header-line);
  padding: .5rem;
  display: none;
  box-shadow: var(--sys-header-shadow);
  border-radius: var(--sys-radius);
  z-index: 60;
}
.sys-inst[data-open="true"] .sys-inst__panel { display: block; }
.sys-inst__panel a {
  display: block;
  color: var(--sys-header-fg);
  text-decoration: none;
  font-size: .8125rem;
  padding: .45rem .55rem;
  border-radius: var(--sys-radius);
  white-space: nowrap;
}
.sys-inst__panel a:hover { background: var(--sys-header-hover); color: var(--sys-cyan-700); }
html[data-theme="dark"] .sys-inst__panel a:hover { color: #fff; }
.sys-inst__panel hr {
  border: 0; border-top: 1px solid var(--sys-header-line);
  margin: .4rem .55rem;
}

.sys-iconbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sys-header-fg);
  border-radius: var(--sys-radius);
  padding: .35rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.sys-iconbtn:hover { background: var(--sys-header-hover); border-color: var(--sys-header-line); }
.sys-iconbtn svg { width: 16px; height: 16px; flex: none; }
/* Rótulo dos botões de ícone do cabeçalho.
   Abaixo de 576px o texto some da tela, mas NÃO pode sumir da árvore de
   acessibilidade: o SVG é aria-hidden, então este span é o único nome que
   o leitor de tela tem para os botões Institucional, Buscar, Tema, Menu e
   Fechar. Com display:none esses cinco botões ficavam mudos no celular.
   Por isso o esconderijo aqui é visual (clip), não estrutural. */
.sys-iconbtn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 576px) {
  .sys-iconbtn__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
}

.sys-header__main-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 72px;
}

.sys-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.sys-brand:hover { text-decoration: none; }
/* Símbolo do logotipo (PNG com fundo transparente, funciona sobre o escuro) */
.sys-brand__mark {
  width: 36px; height: 36px; flex: none;
  object-fit: contain;
  display: block;
}
/* Marca escrita em HTML, nas cores do logotipo: "sys" em azul-marinho e
   "INFO" em azul. Texto em vez de imagem para ficar nítido em qualquer tela.
   As cores vêm dos tokens do cabeçalho, então acompanham o tema. */
.sys-brand__word {
  font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--sys-navy-brand); line-height: 1;
  font-family: var(--sys-font-ui);
  transition: font-size .15s ease;
}
.sys-brand__word b { color: var(--sys-cyan); font-weight: 800; letter-spacing: -.02em; }

/* No escuro, o "sys" precisa ser claro para aparecer */
html[data-theme="dark"] .sys-brand__word { color: #FFFFFF; }
html[data-theme="dark"] .sys-brand__word b { color: var(--sys-cyan-400); }

/* Variante forçada para fundo escuro, usada no rodapé */
.sys-brand__word--ondark { color: #FFFFFF; }
.sys-brand__word--ondark b { color: var(--sys-cyan-400); }
.sys-brand__sub {
  display: none; font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sys-header-muted); font-weight: 700;
}
@media (min-width: 1200px) { .sys-brand__sub { display: block; } }

.sys-header__spacer { flex: 1 1 auto; }

.sys-header__cta {
  display: none;
  align-items: center; gap: .45rem;
  border: 1px solid var(--sys-cyan);
  color: var(--sys-cyan-700);
  border-radius: var(--sys-radius);
  padding: .45rem .8rem;
  font-size: .8125rem; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sys-header__cta:hover { background: var(--sys-cyan); color: #fff; }
html[data-theme="dark"] .sys-header__cta { border-color: var(--sys-cyan-700); color: var(--sys-cyan-400); }
html[data-theme="dark"] .sys-header__cta:hover { background: var(--sys-cyan-700); color: #fff; }
@media (min-width: 992px) { .sys-header__cta { display: inline-flex; } }

/* Faixa estreita da área em que os botões existem.
   São seis botões dividindo a linha com o logotipo. Medido no navegador:
   o conjunto precisa de 900px e há 944px úteis em uma janela de 992px.
   Sobrariam 44px, e essa folga é pequena demais para um detalhe que
   acontece em todo carregamento: a fonte Inter vem do Google com
   font-display swap, então o texto é desenhado primeiro na fonte de
   sistema, que é mais larga. Se nesse instante os botões não couberem, a
   linha quebra e volta ao lugar quando a Inter chega - um deslocamento de
   layout visível, bem no cabeçalho.
   Reduzir o respiro lateral entre 992px e 1199px devolve cerca de 40px e
   elimina o risco. A partir de 1200px sobra espaço e o botão volta ao
   tamanho normal. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sys-header__cta {
    padding-inline: .58rem;
    font-size: .78125rem;
  }
}

.sys-burger { display: inline-flex; }
@media (min-width: 992px) { .sys-burger { display: none; } }

/* Navegação principal */
.sys-nav {
  border-top: 1px solid var(--sys-header-line);
  display: none;
}
@media (min-width: 992px) { .sys-nav { display: block; } }

.sys-nav__list {
  display: flex; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: nowrap;
}
.sys-nav__link {
  display: flex; align-items: center;
  padding: .7rem .75rem;
  color: var(--sys-header-fg);
  font-size: .8125rem; font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.sys-nav__link:hover { color: var(--sys-cyan-700); border-bottom-color: var(--sys-cyan); }
.sys-nav__link[aria-current="page"] { color: var(--sys-cyan-700); border-bottom-color: var(--sys-cyan); }
.sys-nav__list > li:first-child .sys-nav__link { padding-left: 0; }
html[data-theme="dark"] .sys-nav__link:hover,
html[data-theme="dark"] .sys-nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--sys-cyan-400); }

/* "Mais editorias" é um <button>: sem este reset ele herda o fundo e a borda
   padrão do navegador e aparece como uma caixa branca dentro do cabeçalho. */
button.sys-nav__link {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  gap: .3rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.sys-nav__link:hover { color: var(--sys-cyan-700); border-bottom-color: var(--sys-cyan); }
button.sys-nav__link[aria-expanded="true"] { color: var(--sys-cyan-700); border-bottom-color: var(--sys-cyan); }
html[data-theme="dark"] button.sys-nav__link:hover,
html[data-theme="dark"] button.sys-nav__link[aria-expanded="true"] { color: #fff; border-bottom-color: var(--sys-cyan-400); }

.sys-nav__more { position: relative; }
/* Painel "Mais editorias".
   Ele nasceu com 320px e duas colunas apertadas, para cinco itens. Hoje
   abriga dez, incluindo nomes longos como "Produtos e Dispositivos" e
   "Espaço e NASA", que quebravam em duas linhas dentro de uma coluna
   estreita. Não há motivo para economizar largura aqui: o painel flutua
   sobre a página, alinhado à direita, e não empurra nada. */
.sys-nav__panel {
  position: absolute; right: 0; top: 100%;
  min-width: 620px;
  max-width: min(760px, calc(100vw - 3rem));
  background: var(--sys-header-panel);
  border: 1px solid var(--sys-header-line);
  border-top: 0;
  padding: 1rem;
  display: none;
  box-shadow: var(--sys-header-shadow);
  z-index: 40;
}
.sys-nav__more[data-open="true"] .sys-nav__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .15rem 1.25rem;
}
.sys-nav__panel a {
  color: var(--sys-header-fg); text-decoration: none;
  font-size: .875rem; padding: .55rem .65rem; border-radius: var(--sys-radius);
  display: block;
  white-space: nowrap;
}
.sys-nav__panel a:hover { background: var(--sys-header-hover); color: var(--sys-cyan-700); }
html[data-theme="dark"] .sys-nav__panel a:hover { color: #fff; }

/* Menu móvel */
.sys-drawer {
  position: fixed; inset: 0; z-index: 1050;
  display: none;
}
.sys-drawer[data-open="true"] { display: block; }
.sys-drawer__backdrop { position: absolute; inset: 0; background: rgba(5, 13, 24, .5); }
.sys-drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(88vw, 380px);
  background: var(--sys-header-bg);
  color: var(--sys-header-fg);
  overflow-y: auto;
  padding: 1rem 1.25rem 3rem;
  border-left: var(--sys-rule) solid var(--sys-cyan);
}
.sys-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-block: .5rem 1rem; }
.sys-drawer__group { margin-top: 1.25rem; }
.sys-drawer__title {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--sys-cyan-700); font-weight: 800; margin-bottom: .5rem;
}
html[data-theme="dark"] .sys-drawer__title { color: var(--sys-cyan-400); }
.sys-drawer__link {
  display: block; padding: .55rem 0;
  color: var(--sys-header-fg); text-decoration: none;
  font-size: .95rem; font-weight: 600;
  border-bottom: 1px solid var(--sys-header-line);
}
.sys-drawer__link:hover { color: var(--sys-cyan-700); }
html[data-theme="dark"] .sys-drawer__link:hover { color: var(--sys-cyan-400); }

/* Busca no cabeçalho */
.sys-searchbar {
  background: var(--sys-header-bg-top);
  border-top: 1px solid var(--sys-header-line);
  display: none;
  padding-block: .9rem;
}
.sys-searchbar[data-open="true"] { display: block; }
.sys-searchbar form { display: flex; gap: .5rem; }
.sys-searchbar input[type="search"] {
  flex: 1 1 auto;
  background: var(--sys-header-panel);
  border: 1px solid var(--sys-line-strong);
  color: var(--sys-header-fg);
  padding: .6rem .8rem;
  border-radius: var(--sys-radius);
  font-size: .95rem;
}
.sys-searchbar input[type="search"]::placeholder { color: var(--sys-header-muted); }
html[data-theme="dark"] .sys-searchbar input[type="search"] {
  background: var(--sys-ink-950);
  border-color: var(--sys-header-line);
  color: #fff;
}

/* -------------------------------------------------------------------------
   4. Faixa de urgente
   ---------------------------------------------------------------------- */
.sys-breaking {
  background: var(--sys-bg-alt);
  border-bottom: 1px solid var(--sys-border);
  font-size: .8125rem;
}
.sys-breaking__inner { display: flex; align-items: center; gap: .75rem; padding-block: .55rem; }
.sys-breaking__tag {
  flex: none;
  background: var(--sys-alert); color: #fff;
  font-size: .625rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: .25rem .5rem; border-radius: 2px;
}
/* Variante de Boa Notícia: o selo troca o vermelho de alerta pela cor da
   editoria (--sys-cat, definida pela classe cat-boas-noticias no mesmo
   elemento). O vermelho existe para sinalizar urgência; num selo que diz
   "Boa notícia" ele contradiz o próprio texto. */
.sys-breaking--boa .sys-breaking__tag { background: var(--sys-cat); }
.sys-breaking__text { color: var(--sys-fg); text-decoration: none; font-weight: 600; }
.sys-breaking__text:hover { text-decoration: underline; }
.sys-breaking__time { color: var(--sys-fg-muted); font-variant-numeric: tabular-nums; margin-left: auto; flex: none; display: none; }
@media (min-width: 768px) { .sys-breaking__time { display: block; } }

/* Aviso de conteúdo demonstrativo */
.sys-demo {
  background: #FFF8E6;
  border-bottom: 1px solid #F0DFAE;
  color: #6B4E06;
  font-size: .8125rem;
}
html[data-theme="dark"] .sys-demo { background: #241E0B; border-bottom-color: #4A3D10; color: #EBD79A; }
.sys-demo__inner { display: flex; gap: .6rem; align-items: flex-start; padding-block: .6rem; }
.sys-demo strong { font-weight: 800; }

/* -------------------------------------------------------------------------
   5. Componentes editoriais
   ---------------------------------------------------------------------- */
.sys-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sys-cat); text-decoration: none;
}
.sys-kicker:hover { color: var(--sys-cat); text-decoration: underline; }
/* O rótulo de editoria não leva nenhum traço decorativo antes do texto.
   A cor da editoria já é a marcação visual suficiente. */

.sys-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .75rem; color: var(--sys-fg-muted);
}
.sys-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.sys-meta time { font-variant-numeric: tabular-nums; }

.sys-headline a { color: inherit; text-decoration: none; }
.sys-headline a:hover { color: var(--sys-link); text-decoration: underline; text-decoration-thickness: 2px; }

.sys-dek { color: var(--sys-fg-soft); font-size: 1rem; line-height: 1.55; margin: 0; }

.sys-figure { position: relative; display: block; background: var(--sys-surface-2); overflow: hidden; }
.sys-figure img { display: block; width: 100%; object-fit: cover; }
.sys-figure--16x9 { aspect-ratio: 16 / 9; }
.sys-figure--4x3 { aspect-ratio: 4 / 3; }
.sys-figure--3x2 { aspect-ratio: 3 / 2; }
.sys-figure--1x1 { aspect-ratio: 1 / 1; }
.sys-figure img { width: 100%; height: 100%; }

/* Manchete */
.sys-lead { display: grid; gap: 1rem; }
.sys-lead__headline { font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.05rem); letter-spacing: -.026em; }
.sys-lead__dek { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }

/* Manchete sem imagem.

   Tirar a foto da manchete não é só remover um elemento: a imagem era o que
   dava peso visual à coluna principal ao lado da lista de últimas notícias.
   Sem ela, o título precisa assumir esse peso sozinho, senão a manchete
   parece menos importante que a lista ao lado dela.

   Daí o filete grosso na cor da editoria no topo, o título um pouco maior e
   o respiro extra: a hierarquia passa a ser feita por tipografia, que é como
   jornal impresso sempre resolveu isso. */
.sys-lead--sem-figura {
  border-top: var(--sys-rule) solid var(--sys-cat);
  padding-top: 1.35rem;
}
.sys-lead--sem-figura .sys-lead__headline {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.08;
}
.sys-lead--sem-figura .sys-lead__dek { margin-top: .15rem; }

/* align-content: start impede que o espaço que sobra na coluna se distribua
   entre os elementos. Sem isso, a manchete (que é grid) estica para
   acompanhar a altura da lista de últimas notícias ao lado, e as folgas
   aparecem como buracos entre título, subtítulo e assinatura - foi
   exatamente o que aconteceu quando a imagem saiu. Agora a sobra fica toda
   embaixo, onde não separa nada. */
.sys-lead--sem-figura { align-content: start; }

/* Bloco "O que aconteceu" dentro da manchete: os fatos apurados, adiantados
   na home. O fio à esquerda o separa do resto sem transformá-lo num cartão,
   que competiria com as secundárias logo abaixo. */
.sys-lead__fatos {
  border-left: 2px solid var(--sys-cat);
  padding-left: 1.15rem;
  margin-top: .35rem;
  display: grid;
  gap: .6rem;
}
.sys-lead__fatos-titulo {
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sys-cat); margin: 0;
}
.sys-lead__fatos p {
  margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--sys-fg-soft);
}
.sys-lead__fatos-subtitulo { margin-top: .35rem !important; }
.sys-lead__fatos-lista {
  margin: 0; padding-left: 1.1rem;
  display: grid; gap: .35rem;
  font-size: .9375rem; line-height: 1.55; color: var(--sys-fg-soft);
}
.sys-lead__fatos-lista::marker, .sys-lead__fatos-lista li::marker { color: var(--sys-cat); }
.sys-lead__fatos-mais { font-weight: 700; }
.sys-lead__fatos-mais a { color: var(--sys-link); text-decoration: none; }
.sys-lead__fatos-mais a:hover { text-decoration: underline; }

/* No celular a manchete já ocupa a largura toda e não sobra espaço para
   preencher: o bloco de fatos vira leitura extra antes das outras chamadas.
   Mantido, mas com o fio e o recuo menores, para não estreitar o texto. */
@media (max-width: 767.98px) {
  .sys-lead__fatos { padding-left: .85rem; }
}

/* Cartão padrão */
.sys-card { display: grid; gap: .6rem; }
.sys-card__headline { font-size: 1.0625rem; line-height: 1.28; }
.sys-card--md .sys-card__headline { font-size: 1.1875rem; }
.sys-card--lg .sys-card__headline { font-size: 1.5rem; }
.sys-card__dek { font-size: .875rem; color: var(--sys-fg-soft); }

.sys-card--row { grid-template-columns: 96px 1fr; align-items: start; gap: .85rem; }
.sys-card--row .sys-card__headline { font-size: .9375rem; }
@media (min-width: 576px) { .sys-card--row { grid-template-columns: 128px 1fr; } }

/* Lista de últimas */
.sys-latest { list-style: none; margin: 0; padding: 0; }
.sys-latest__item { padding: .8rem 0; border-bottom: 1px solid var(--sys-border); display: grid; gap: .3rem; }
.sys-latest__item:first-child { padding-top: 0; }
.sys-latest__item:last-child { border-bottom: 0; padding-bottom: 0; }
/* O horário usava a cor da editoria (--sys-cat). Ficava bonito e reprovava em
   contraste: medido em 31/08/2026, as cores de editoria como texto de 11px
   sobre branco davam 3,09, 2,94 e 3,77 para Boas Notícias, Criptomoedas e Open
   Finance, contra os 4,5 exigidos. Cor de destaque foi feita para filete,
   selo e rótulo, onde a área é grande; em texto miúdo ela não sustenta.

   A editoria continua identificada no cartão pelo kicker e pelo filete
   colorido, então mover o horário para o cinza secundário não tira informação
   nenhuma de ninguém. */
.sys-latest__time {
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  color: var(--sys-fg-muted); font-variant-numeric: tabular-nums;
}
.sys-latest__title { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.sys-latest__title a { color: inherit; text-decoration: none; }
.sys-latest__title a:hover { color: var(--sys-link); text-decoration: underline; }

/* Cabeçalho de seção */
.sys-section { padding-block: 2.25rem; }
.sys-section--alt { background: var(--sys-bg-alt); border-block: 1px solid var(--sys-border); }
.sys-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--sys-fg);
  padding-bottom: .5rem;
}
.sys-section__title { font-size: 1.125rem; letter-spacing: -.01em; text-transform: uppercase; }
.sys-section__title span { color: var(--sys-cat); }
.sys-section__link { font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sys-section__link:hover { text-decoration: underline; }
.sys-section__desc { color: var(--sys-fg-muted); font-size: .875rem; margin: -.6rem 0 1.25rem; }

.sys-rule-top { border-top: 1px solid var(--sys-border); padding-top: 1rem; }
.sys-divider { border-top: 1px solid var(--sys-border); margin-block: 2rem; }

/* Grades */
.sys-grid { display: grid; gap: 1.5rem; }
.sys-grid--2 { grid-template-columns: 1fr; }
.sys-grid--3 { grid-template-columns: 1fr; }
.sys-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 576px) {
  .sys-grid--2, .sys-grid--3, .sys-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .sys-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .sys-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.sys-grid--sep > * { position: relative; }
@media (min-width: 576px) {
  .sys-grid--sep { column-gap: 1.5rem; }
  .sys-grid--sep > * + * { border-left: 0; }
}

/* Layout da capa */
.sys-hero { display: grid; gap: 1.75rem; padding-block: 1.75rem; }
@media (min-width: 992px) {
  .sys-hero { grid-template-columns: minmax(0, 2.05fr) minmax(300px, 1fr); gap: 2.25rem; }
  .sys-hero__aside { border-left: 1px solid var(--sys-border); padding-left: 2.25rem; }
}

.sys-secondaries { display: grid; gap: 1.5rem; padding-block: 1.75rem; border-top: 1px solid var(--sys-border); }
@media (min-width: 576px) { .sys-secondaries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sys-secondaries { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 576px) {
  .sys-secondaries > * + * { padding-left: 1.5rem; border-left: 1px solid var(--sys-border); }
  .sys-secondaries > *:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (min-width: 1200px) {
  .sys-secondaries > *:nth-child(3) { padding-left: 1.5rem; border-left: 1px solid var(--sys-border); }
}

/* -------------------------------------------------------------------------
   6. Radar Global
   ---------------------------------------------------------------------- */
.sys-radar { background: var(--sys-ink-900); color: #E9F1F9; padding-block: 2.5rem; }
html[data-theme="dark"] .sys-radar { background: #070F1A; }
.sys-radar .sys-section__head { border-bottom-color: rgba(255, 255, 255, .28); }
.sys-radar .sys-section__title { color: #fff; }
.sys-radar .sys-section__link { color: var(--sys-cyan-400); }
.sys-radar .sys-section__desc { color: #9DB2C8; }

.sys-radar__grid { display: grid; gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 768px) { .sys-radar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sys-radar__grid { grid-template-columns: repeat(3, 1fr); } }

.sys-radar__item { background: var(--sys-ink-900); padding: 1.1rem 1.15rem; display: grid; gap: .5rem; align-content: start; }
html[data-theme="dark"] .sys-radar__item { background: #070F1A; }
.sys-radar__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sys-radar__country {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sys-cyan-400);
}
.sys-radar__lang {
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .28); color: #B9CCE0;
  padding: .1rem .35rem; border-radius: 2px;
}
.sys-radar__time { margin-left: auto; font-size: .6875rem; color: #8CA3BC; font-variant-numeric: tabular-nums; }
.sys-radar__title { font-size: 1rem; line-height: 1.3; font-weight: 700; }
.sys-radar__title a { color: #fff; text-decoration: none; }
.sys-radar__title a:hover { color: var(--sys-cyan-400); text-decoration: underline; }
.sys-radar__summary { font-size: .875rem; color: #B9CCE0; margin: 0; }
.sys-radar__sources { font-size: .6875rem; color: #8CA3BC; }
.sys-radar__sources b { color: #B9CCE0; font-weight: 700; }

/* Página do Radar */
.sys-region { border-top: 2px solid var(--sys-fg); padding-top: 1rem; margin-top: 2.25rem; }
.sys-region__title { font-size: 1.25rem; text-transform: uppercase; letter-spacing: -.01em; }
.sys-region__desc { color: var(--sys-fg-muted); font-size: .875rem; margin-top: .25rem; }

.sys-radar-row {
  display: grid; gap: .55rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--sys-border);
}
@media (min-width: 992px) { .sys-radar-row { grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: start; } }
.sys-radar-row__side { display: grid; gap: .35rem; align-content: start; }
.sys-radar-row__flag {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sys-cat);
}
.sys-radar-row__meta { font-size: .75rem; color: var(--sys-fg-muted); }
.sys-radar-row__title { font-size: 1.125rem; line-height: 1.3; }
.sys-radar-row__title a { color: inherit; text-decoration: none; }
.sys-radar-row__title a:hover { color: var(--sys-link); text-decoration: underline; }

.sys-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--sys-border); color: var(--sys-fg-muted);
  padding: .15rem .45rem; border-radius: 2px; background: var(--sys-panel);
  text-decoration: none;
}
a.sys-chip:hover { border-color: var(--sys-cat); color: var(--sys-cat); }
.sys-chip--solid { background: var(--sys-cat); border-color: var(--sys-cat); color: #fff; }

/* -------------------------------------------------------------------------
   7. Análise sysINFO
   ---------------------------------------------------------------------- */
.sys-analysis {
  background: var(--sys-bg-alt);
  border-block: 1px solid var(--sys-border);
  border-left: var(--sys-rule) solid var(--sys-cyan);
  padding: 1.5rem;
}
.sys-analysis__label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sys-cyan-700); margin-bottom: .5rem;
}
html[data-theme="dark"] .sys-analysis__label { color: var(--sys-cyan-400); }
.sys-analysis__text { font-family: var(--sys-font-serif); font-size: 1.0625rem; line-height: 1.6; color: var(--sys-fg); }
.sys-analysis__text p:last-child { margin-bottom: 0; }

.sys-analysis-band { background: var(--sys-ink-800); color: #E9F1F9; padding-block: 2.5rem; }
html[data-theme="dark"] .sys-analysis-band { background: #0D1826; }
.sys-analysis-band .sys-section__head { border-bottom-color: rgba(255, 255, 255, .28); }
.sys-analysis-band .sys-section__title { color: #fff; }
.sys-analysis-band .sys-section__link { color: var(--sys-cyan-400); }
.sys-analysis-band .sys-section__desc { color: #9DB2C8; }
.sys-analysis-band__grid { display: grid; gap: 1.75rem; }
@media (min-width: 992px) { .sys-analysis-band__grid { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; } }
.sys-analysis-band__quote {
  font-family: var(--sys-font-serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.35; color: #fff; margin: 0 0 1rem;
}
.sys-analysis-band__quote a { color: inherit; text-decoration: none; }
.sys-analysis-band__quote a:hover { color: var(--sys-cyan-400); }
.sys-analysis-band__body { color: #B9CCE0; }
.sys-analysis-band__list { list-style: none; margin: 0; padding: 0; }
.sys-analysis-band__list li { padding: .85rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sys-analysis-band__list li:first-child { padding-top: 0; }
.sys-analysis-band__list li:last-child { border-bottom: 0; }
.sys-analysis-band__list a { color: #fff; text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.3; display: block; }
.sys-analysis-band__list a:hover { color: var(--sys-cyan-400); text-decoration: underline; }

/* -------------------------------------------------------------------------
   8. Mais lidas
   ---------------------------------------------------------------------- */
.sys-ranked { list-style: none; margin: 0; padding: 0; counter-reset: sysrank; }
.sys-ranked li {
  counter-increment: sysrank;
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem;
  padding: .9rem 0; border-bottom: 1px solid var(--sys-border);
}
.sys-ranked li:first-child { padding-top: 0; }
.sys-ranked li:last-child { border-bottom: 0; }
.sys-ranked li::before {
  content: counter(sysrank);
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: var(--sys-line-strong); font-variant-numeric: tabular-nums;
}
.sys-ranked a { color: inherit; text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.sys-ranked a:hover { color: var(--sys-link); text-decoration: underline; }

/* -------------------------------------------------------------------------
   9. Ferramentas
   ---------------------------------------------------------------------- */
.sys-tools-grid { display: grid; gap: 1px; background: var(--sys-border); border: 1px solid var(--sys-border); }
@media (min-width: 576px) { .sys-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sys-tools-grid { grid-template-columns: repeat(4, 1fr); } }

.sys-tool-tile {
  background: var(--sys-panel); padding: 1.15rem;
  display: grid; gap: .45rem; align-content: start;
  text-decoration: none; color: inherit;
  border-top: 3px solid transparent;
}
.sys-tool-tile:hover { background: var(--sys-bg-alt); border-top-color: var(--sys-cat); color: inherit; }
.sys-tool-tile__icon { width: 28px; height: 28px; color: var(--sys-cat); }
.sys-tool-tile__name { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.sys-tool-tile__desc { font-size: .8125rem; color: var(--sys-fg-muted); margin: 0; }

.sys-privacy-note {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--sys-bg-alt); border: 1px solid var(--sys-border);
  border-left: var(--sys-rule) solid var(--sys-ok);
  padding: .85rem 1rem; font-size: .875rem; color: var(--sys-fg-soft);
  border-radius: 0 var(--sys-radius) var(--sys-radius) 0;
}
.sys-privacy-note svg { width: 18px; height: 18px; flex: none; color: var(--sys-ok); margin-top: .15rem; }

/* Aviso dos geradores de documento: dados fictícios, uso indevido é crime */
.sys-legal-note {
  display: flex; gap: .6rem; align-items: flex-start;
  background: #FFF8E6; border: 1px solid #F0DFAE;
  border-left: var(--sys-rule) solid #B45309;
  padding: .85rem 1rem; font-size: .875rem; color: #6B4E06;
  border-radius: 0 var(--sys-radius) var(--sys-radius) 0;
}
html[data-theme="dark"] .sys-legal-note {
  background: #241E0B; border-color: #4A3D10; color: #EBD79A;
}
.sys-legal-note svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
.sys-legal-note strong { font-weight: 800; }

/* Painéis lado a lado: gerar de um lado, validar do outro */
.sys-tool-split { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 992px) { .sys-tool-split { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.sys-tool-panel {
  border: 1px solid var(--sys-border);
  border-top: var(--sys-rule) solid var(--sys-cat);
  border-radius: 0 0 var(--sys-radius) var(--sys-radius);
  background: var(--sys-panel);
  padding: 1.15rem;
  display: grid; gap: .9rem; align-content: start;
}
.sys-tool-panel__title {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .5rem;
}
.sys-tool-panel__title svg { width: 18px; height: 18px; color: var(--sys-cat); flex: none; }
.sys-tool-panel__hint { font-size: .8125rem; color: var(--sys-fg-muted); margin: -.5rem 0 0; }

/* Linha de opções em caixas de seleção */
.sys-optrow { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; align-items: center; font-size: .8125rem; }
.sys-optrow label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.sys-optrow input[type="checkbox"], .sys-optrow input[type="radio"] { accent-color: var(--sys-cyan); }

/* Amostra de cor */
.sys-color-preview {
  width: 100%; height: 96px; border-radius: var(--sys-radius);
  border: 1px solid var(--sys-line-strong);
  background: transparent;
}

/* Controle deslizante do gerador de senha */
.sys-range { display: flex; align-items: center; gap: .75rem; }
.sys-range input[type="range"] { flex: 1 1 auto; accent-color: var(--sys-cyan); }
.sys-range output {
  min-width: 3ch; text-align: right; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--sys-cat);
}

/* Índice completo de ferramentas, repetido no rodapé de cada ferramenta */
.sys-toolindex { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .sys-toolindex { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sys-toolindex { grid-template-columns: repeat(3, 1fr); } }
.sys-toolindex__group { border-top: 2px solid var(--sys-fg); padding-top: .75rem; }
.sys-toolindex__title {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .6rem; color: var(--sys-cat);
}
.sys-toolindex ul { list-style: none; margin: 0; padding: 0; }
.sys-toolindex li { padding: .3rem 0; }
.sys-toolindex a { font-size: .875rem; text-decoration: none; color: var(--sys-fg); }
.sys-toolindex a:hover { color: var(--sys-link); text-decoration: underline; }
.sys-toolindex a[aria-current="page"] { font-weight: 800; color: var(--sys-cat); }

/* -------------------------------------------------------------------------
   Menu vertical de ferramentas nas subpáginas

   Em telas grandes, o índice que fica no rodapé da página é reposicionado
   como barra lateral fixa, para trocar de ferramenta sem voltar ao índice.

   Feito só com CSS Grid: no HTML o índice continua sendo o último bloco do
   documento, que é a ordem correta para leitor de tela, para navegação por
   teclado e para quem abre a página sem folha de estilo. Quem lê em sequência
   encontra primeiro a ferramenta e a documentação, e só depois a lista.
   ---------------------------------------------------------------------- */
@media (min-width: 1200px) {
  body[data-tool] main > .sys-container {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 2.75rem;
    align-items: start;
    /* A LARGURA É A MESMA DO RESTO DO SITE, e a barra lateral sai de dentro
       dela.

       Havia aqui um max-width de 1580px, para a área da ferramenta não
       encolher com a chegada da barra. O preço era visível em toda página de
       ferramenta: a barra e o conteúdo ultrapassavam as margens do cabeçalho,
       da trilha de navegação e do rodapé, e a página parecia desalinhada do
       portal. Entre preservar a largura útil da ferramenta e preservar o
       alinhamento com o site, o alinhamento vale mais - 250px a menos não
       muda a leitura de nenhuma destas telas, e a sensação de página quebrada
       muda. */
  }
  body[data-tool] main > .sys-container > * {
    grid-column: 2;
    min-width: 0;
  }

  body[data-tool] main > .sys-container > section[aria-labelledby="todas-ferramentas"] {
    grid-column: 1;
    /* Ocupa todas as linhas do conteúdo. As linhas implícitas que sobram têm
       altura zero, então o excesso do span não produz espaço nenhum. */
    grid-row: 1 / span 99;
    align-self: start;
    /* A barra rola junto com a página, e não por conta própria.

       Ela já foi sticky, com max-height e overflow-y: auto. Ficava presa na
       tela e criava uma segunda barra de rolagem dentro da primeira, o que na
       prática significa que a pessoa precisa descobrir onde o ponteiro está
       para saber o que vai rolar. Duas áreas de rolagem na mesma tela é uma
       das formas mais rápidas de deixar uma página confusa, e o ganho aqui
       era pequeno: a lista de ferramentas não precisa acompanhar quem está
       lendo o relatório. */
    border-top: 0;
    border-right: 1px solid var(--sys-border);
    padding: .25rem 1.25rem 1.5rem 0;
    margin: 0;
  }

  /* Cabeçalho da barra, compacto */
  body[data-tool] section[aria-labelledby="todas-ferramentas"] .sys-section__head {
    border-bottom-width: 1px;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
  }
  body[data-tool] section[aria-labelledby="todas-ferramentas"] .sys-section__title { font-size: .8125rem; }
  body[data-tool] section[aria-labelledby="todas-ferramentas"] .sys-section__link,
  body[data-tool] section[aria-labelledby="todas-ferramentas"] .sys-section__desc { display: none; }

  /* Uma coluna, itens mais próximos */
  body[data-tool] .sys-toolindex { grid-template-columns: 1fr; gap: 1.35rem; }
  body[data-tool] .sys-toolindex__group {
    border-top: 1px solid var(--sys-border);
    padding-top: .6rem;
  }
  body[data-tool] .sys-toolindex__title { font-size: .6875rem; margin-bottom: .35rem; }
  body[data-tool] .sys-toolindex li { padding: .16rem 0; }
  body[data-tool] .sys-toolindex a { font-size: .8125rem; line-height: 1.35; display: block; }
  body[data-tool] .sys-toolindex a[aria-current="page"] {
    border-left: 3px solid var(--sys-cat);
    margin-left: -.7rem;
    padding-left: .5rem;
  }

  /* Barra de rolagem discreta dentro do menu */
  body[data-tool] main > .sys-container > section[aria-labelledby="todas-ferramentas"] {
    scrollbar-width: thin;
    scrollbar-color: var(--sys-line-strong) transparent;
  }
  body[data-tool] main > .sys-container > section[aria-labelledby="todas-ferramentas"]::-webkit-scrollbar { width: 8px; }
  body[data-tool] main > .sys-container > section[aria-labelledby="todas-ferramentas"]::-webkit-scrollbar-thumb {
    background: var(--sys-line-strong);
    border-radius: 99px;
  }
  body[data-tool] main > .sys-container > section[aria-labelledby="todas-ferramentas"]::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* Interface das ferramentas */
.sys-tool { display: grid; gap: 1rem; }
.sys-tool__bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sys-tool__bar--end { justify-content: flex-end; }

.sys-field { display: grid; gap: .35rem; }
.sys-field label { font-size: .8125rem; font-weight: 700; color: var(--sys-fg-soft); }
.sys-field .sys-hint { font-size: .75rem; color: var(--sys-fg-muted); }

.sys-input, .sys-textarea, .sys-select {
  width: 100%;
  background: var(--sys-panel);
  color: var(--sys-fg);
  border: 1px solid var(--sys-line-strong);
  border-radius: var(--sys-radius);
  padding: .6rem .7rem;
  font-size: .9375rem;
  font-family: inherit;
}
.sys-textarea, .sys-input--mono, .sys-output {
  font-family: var(--sys-font-mono);
  font-size: .875rem;
  line-height: 1.55;
}
.sys-textarea { min-height: 190px; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.sys-textarea--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.sys-input:focus, .sys-textarea:focus, .sys-select:focus { border-color: var(--sys-blue); }

.sys-output {
  background: var(--sys-bg-alt);
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius);
  padding: .75rem;
  min-height: 190px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--sys-fg);
}

.sys-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: var(--sys-radius);
  border: 1px solid var(--sys-line-strong);
  background: var(--sys-panel);
  color: var(--sys-fg);
  font-size: .875rem; font-weight: 700;
  padding: .5rem .9rem;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sys-btn:hover { background: var(--sys-bg-alt); color: var(--sys-fg); border-color: var(--sys-fg-muted); }
.sys-btn--primary { background: var(--sys-blue); border-color: var(--sys-blue); color: #fff; }
.sys-btn--primary:hover { background: var(--sys-blue-600); border-color: var(--sys-blue-600); color: #fff; }
.sys-btn--ghost { background: transparent; }
.sys-btn svg { width: 16px; height: 16px; }
.sys-btn[disabled] { opacity: .55; cursor: not-allowed; }

.sys-status { font-size: .8125rem; font-weight: 600; min-height: 1.35rem; }
.sys-status[data-state="ok"] { color: var(--sys-ok); }
.sys-status[data-state="error"] { color: var(--sys-alert); }
.sys-status[data-state="info"] { color: var(--sys-fg-muted); }

.sys-strength { display: grid; gap: .5rem; }
.sys-strength__track { height: 8px; background: var(--sys-surface-2); border-radius: 99px; overflow: hidden; }
.sys-strength__fill { height: 100%; width: 0; background: var(--sys-alert); transition: width .2s ease, background-color .2s ease; }
@media (prefers-reduced-motion: reduce) { .sys-strength__fill { transition: none; } }
.sys-strength__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .8125rem; }
.sys-strength__list li { display: flex; gap: .5rem; align-items: center; color: var(--sys-fg-muted); }
.sys-strength__list li[data-pass="true"] { color: var(--sys-ok); }

.sys-diff { font-family: var(--sys-font-mono); font-size: .8125rem; border: 1px solid var(--sys-border); border-radius: var(--sys-radius); overflow: hidden; }
.sys-diff__row { display: grid; grid-template-columns: 3.5rem 1fr; border-bottom: 1px solid var(--sys-border); }
.sys-diff__row:last-child { border-bottom: 0; }
.sys-diff__num { background: var(--sys-bg-alt); color: var(--sys-fg-muted); padding: .25rem .5rem; text-align: right; border-right: 1px solid var(--sys-border); }
.sys-diff__text { padding: .25rem .6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sys-diff__row[data-kind="add"] .sys-diff__text { background: rgba(15, 123, 79, .12); }
.sys-diff__row[data-kind="del"] .sys-diff__text { background: rgba(194, 43, 37, .12); text-decoration: line-through; text-decoration-color: rgba(194, 43, 37, .5); }
.sys-diff__row[data-kind="mod"] .sys-diff__text { background: rgba(180, 83, 9, .12); }

mark.sys-mark { background: rgba(34, 211, 238, .35); color: inherit; padding: .05em 0; border-radius: 2px; }

.sys-kv { display: grid; gap: .1rem; font-size: .875rem; }
.sys-kv__row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--sys-border); }
.sys-kv__row:last-child { border-bottom: 0; }
.sys-kv__k { color: var(--sys-fg-muted); font-weight: 600; }
.sys-kv__v { font-family: var(--sys-font-mono); overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   10. Artigo
   ---------------------------------------------------------------------- */
.sys-article { padding-block: 1.75rem 3rem; }
.sys-article__layout { display: grid; gap: 2rem; }
@media (min-width: 992px) {
  .sys-article__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; }
}
.sys-article__head { max-width: 46rem; display: grid; gap: .9rem; }
/* Rótulo do tipo de conteúdo (Análise, Opinião, Guia), ao lado do kicker de
   editoria. Notícia não leva rótulo: é o padrão e não precisa de marcação
   extra. Discreto de propósito - a cor de destaque já é a da editoria
   (var(--sys-cat)), a mesma usada pelo sys-kicker ao lado. */
.sys-article__type {
  display: inline-flex; align-items: center;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sys-cat);
}
.sys-article__title { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.9rem); letter-spacing: -.027em; }
.sys-article__subtitle {
  font-family: var(--sys-font-serif);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.45; color: var(--sys-fg-soft); font-weight: 400; margin: 0;
}
.sys-article__byline {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding-block: .85rem; border-block: 1px solid var(--sys-border);
  font-size: .8125rem; color: var(--sys-fg-muted);
}
.sys-article__byline a { color: var(--sys-fg); font-weight: 700; text-decoration: none; }
.sys-article__byline a:hover { text-decoration: underline; }

.sys-figure-block { margin: 1.5rem 0; }
.sys-figure-block figcaption { font-size: .8125rem; color: var(--sys-fg-muted); padding-top: .5rem; border-top: 1px solid var(--sys-border); margin-top: .5rem; }
.sys-figure-block figcaption b { color: var(--sys-fg-soft); font-weight: 700; }
.sys-figure-block .sys-credit { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .25rem; }

.sys-prose { max-width: 44rem; font-family: var(--sys-font-serif); font-size: 1.125rem; line-height: 1.72; color: var(--sys-fg); }
.sys-prose p { margin: 0 0 1.15rem; }
.sys-prose h2 {
  font-family: var(--sys-font-ui); font-size: 1.5rem; letter-spacing: -.018em;
  margin: 2.25rem 0 .9rem; padding-top: 1.1rem; border-top: 1px solid var(--sys-border);
  scroll-margin-top: 1.5rem;
}
.sys-prose h3 { font-family: var(--sys-font-ui); font-size: 1.1875rem; margin: 1.75rem 0 .65rem; scroll-margin-top: 1.5rem; }
.sys-prose ul, .sys-prose ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.sys-prose li { margin-bottom: .5rem; }
.sys-prose a { color: var(--sys-link); }
.sys-prose strong { font-weight: 700; }
.sys-prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: var(--sys-rule) solid var(--sys-cat);
  font-size: 1.25rem; line-height: 1.45; color: var(--sys-fg-soft);
}

.sys-block {
  margin: 1.75rem 0; padding: 1.25rem 1.35rem;
  background: var(--sys-bg-alt); border: 1px solid var(--sys-border);
  border-left: var(--sys-rule) solid var(--sys-cat);
  border-radius: 0 var(--sys-radius) var(--sys-radius) 0;
  max-width: 44rem;
}
.sys-block__label {
  font-family: var(--sys-font-ui);
  font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sys-cat); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem;
}
.sys-block__label svg { width: 15px; height: 15px; }
.sys-block h2 { font-family: var(--sys-font-ui); font-size: 1.25rem; border: 0; padding: 0; margin: 0 0 .7rem; }
.sys-block p:last-child, .sys-block ul:last-child { margin-bottom: 0; }
.sys-block--facts { --sys-cat: #0E7490; }
.sys-block--analysis { --sys-cat: #17B6D4; background: linear-gradient(180deg, rgba(23, 182, 212, .07), transparent 70%), var(--sys-bg-alt); }
.sys-block--brasil { --sys-cat: #15803D; }
.sys-block--watch { --sys-cat: #B45309; }

/* Índice interno */
.sys-toc {
  border: 1px solid var(--sys-border); background: var(--sys-panel);
  padding: 1rem 1.15rem; border-radius: var(--sys-radius); margin: 1.5rem 0; max-width: 44rem;
}
.sys-toc__title { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sys-fg-muted); margin-bottom: .6rem; }
.sys-toc ol { margin: 0; padding-left: 1.15rem; font-family: var(--sys-font-ui); font-size: .9375rem; }
.sys-toc li { margin-bottom: .3rem; }
.sys-toc a { text-decoration: none; }
.sys-toc a:hover { text-decoration: underline; }

/* Compartilhar */
.sys-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-block: 1rem; }
.sys-share__label { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sys-fg-muted); margin-right: .25rem; }

/* Fontes */
.sys-sources { max-width: 44rem; margin-top: 2.25rem; }
.sys-sources__list { list-style: none; margin: 0; padding: 0; }
.sys-sources__item { padding: .9rem 0; border-bottom: 1px solid var(--sys-border); display: grid; gap: .3rem; }
.sys-sources__item:last-child { border-bottom: 0; }
.sys-sources__pub { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sys-cat); }
.sys-sources__title { font-size: .9375rem; font-weight: 600; }
.sys-sources__title a { color: var(--sys-fg); }
.sys-sources__meta { font-size: .75rem; color: var(--sys-fg-muted); display: flex; flex-wrap: wrap; gap: .4rem .75rem; }

.sys-disclosure {
  margin-top: 1.5rem; padding: 1rem 1.15rem; max-width: 44rem;
  border: 1px dashed var(--sys-line-strong); border-radius: var(--sys-radius);
  font-size: .8125rem; color: var(--sys-fg-soft); background: var(--sys-bg-alt);
}
.sys-disclosure b { color: var(--sys-fg); }

.sys-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.75rem; }

/* Barra lateral */
.sys-aside { display: grid; gap: 2rem; align-content: start; }
@media (min-width: 992px) { .sys-aside { position: sticky; top: 1rem; } }
.sys-aside__box { border-top: 2px solid var(--sys-fg); padding-top: .75rem; }
.sys-aside__title { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .85rem; }

/* Breadcrumbs */
.sys-breadcrumb { padding-block: .75rem; border-bottom: 1px solid var(--sys-border); font-size: .75rem; }
.sys-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; align-items: center; }
.sys-breadcrumb li { display: flex; align-items: center; gap: .4rem; color: var(--sys-fg-muted); }
.sys-breadcrumb li + li::before { content: "›"; color: var(--sys-line-strong); }
.sys-breadcrumb a { color: var(--sys-fg-muted); text-decoration: none; }
.sys-breadcrumb a:hover { color: var(--sys-link); text-decoration: underline; }
.sys-breadcrumb [aria-current="page"] { color: var(--sys-fg); font-weight: 600; }

/* -------------------------------------------------------------------------
   11. Cabeçalho de editoria e páginas internas
   ---------------------------------------------------------------------- */
.sys-pagehead { padding-block: 2rem 1.5rem; border-bottom: 2px solid var(--sys-fg); }
.sys-pagehead__eyebrow { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sys-cat); margin-bottom: .6rem; }
.sys-pagehead__title { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); letter-spacing: -.026em; }
/* A descrição do topo ocupa toda a largura do container. */
.sys-pagehead__desc { margin-top: .75rem; color: var(--sys-fg-soft); font-size: 1.0625rem; }

.sys-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.15rem; border-bottom: 1px solid var(--sys-border); }

.sys-pagination { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; padding-block: 2rem; }
.sys-pagination a, .sys-pagination span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sys-border); border-radius: var(--sys-radius);
  font-size: .875rem; font-weight: 700; text-decoration: none; color: var(--sys-fg); padding-inline: .6rem;
}
.sys-pagination a:hover { border-color: var(--sys-fg-muted); background: var(--sys-bg-alt); }
.sys-pagination [aria-current="page"] { background: var(--sys-ink-900); border-color: var(--sys-ink-900); color: #fff; }
.sys-pagination .is-disabled { opacity: .45; }

/* Página institucional */
/* Páginas institucionais: `<div class="sys-doc">`. Texto corrido longo, com
   medida de leitura limitada, que é o que sustenta a legibilidade. */
.sys-doc { max-width: 46rem; padding-block: 2rem 3rem; }

/* Páginas de ferramenta: `<section class="sys-doc">`. Aqui o texto explicativo
   convive com a ferramenta, que é larga, e ocupa toda a largura do container. */
section.sys-doc { max-width: none; }
.sys-doc h2 { font-size: 1.375rem; margin: 2.25rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--sys-border); }
.sys-doc h3 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.sys-doc p, .sys-doc li { color: var(--sys-fg-soft); }
.sys-doc p { margin-bottom: 1rem; }
.sys-doc ul, .sys-doc ol { margin-bottom: 1rem; padding-left: 1.35rem; }
.sys-doc li { margin-bottom: .4rem; }
.sys-doc__updated { font-size: .8125rem; color: var(--sys-fg-muted); padding-bottom: 1rem; }

/* FAQ */
.sys-faq { display: grid; gap: 0; border-top: 1px solid var(--sys-border); }
.sys-faq details { border-bottom: 1px solid var(--sys-border); }
.sys-faq summary {
  cursor: pointer; padding: .95rem 0; font-weight: 700; font-size: 1rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sys-faq summary::-webkit-details-marker { display: none; }
.sys-faq summary::after { content: "+"; font-size: 1.35rem; font-weight: 400; color: var(--sys-fg-muted); line-height: 1; }
.sys-faq details[open] summary::after { content: "-"; }
.sys-faq details > div { padding-bottom: 1rem; color: var(--sys-fg-soft); font-size: .9375rem; }
.sys-faq details > div p:last-child { margin-bottom: 0; }

/* Exemplos de uso */
.sys-example { border: 1px solid var(--sys-border); border-radius: var(--sys-radius); overflow: hidden; }
.sys-example__head { background: var(--sys-bg-alt); border-bottom: 1px solid var(--sys-border); padding: .5rem .75rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sys-fg-muted); }
.sys-example pre { margin: 0; padding: .75rem; font-family: var(--sys-font-mono); font-size: .8125rem; overflow-x: auto; color: var(--sys-fg); }

/* -------------------------------------------------------------------------
   11b. Guia de IA
   ---------------------------------------------------------------------- */

/* Barra de filtro, fixa abaixo do cabeçalho */
.sys-ia-filter {
  position: sticky;
  top: 100px;
  z-index: 20;
  background: var(--sys-bg);
  border-bottom: 1px solid var(--sys-border);
  padding-block: .9rem;
  margin-bottom: .5rem;
}
.sys-ia-filter__row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.sys-ia-filter__row .sys-input { flex: 1 1 260px; max-width: 420px; }
.sys-ia-filter__count {
  font-size: .8125rem; color: var(--sys-fg-muted); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sys-ia-filter__count b { color: var(--sys-fg); font-weight: 800; }

/* Grade de fichas */
.sys-ia-grid {
  display: grid;
  gap: 1px;
  background: var(--sys-border);
  border: 1px solid var(--sys-border);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sys-ia-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sys-ia-grid { grid-template-columns: repeat(3, 1fr); } }

.sys-ia-card {
  background: var(--sys-panel);
  padding: 1.05rem 1.15rem 1.15rem;
  display: grid;
  gap: .45rem;
  align-content: start;
  border-top: 3px solid transparent;
}
.sys-ia-card:hover { background: var(--sys-bg-alt); border-top-color: var(--sys-cat); }

.sys-ia-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.sys-ia-card__name { font-size: 1.0625rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.sys-ia-card__name a { color: inherit; text-decoration: none; }
.sys-ia-card__name a:hover { color: var(--sys-link); text-decoration: underline; }
.sys-ia-card__name a[target="_blank"]::after {
  content: "↗";
  font-size: .75em;
  margin-left: .25em;
  color: var(--sys-fg-muted);
}

.sys-ia-card__meta {
  font-size: .75rem; color: var(--sys-fg-muted);
  display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center;
}
.sys-ia-card__country {
  font-weight: 700; color: var(--sys-cat);
  text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem;
}
.sys-ia-card__desc { font-size: .875rem; color: var(--sys-fg-soft); line-height: 1.5; margin: .15rem 0 0; }
.sys-ia-card__domain {
  font-family: var(--sys-font-mono); font-size: .6875rem;
  color: var(--sys-fg-muted); margin-top: .35rem;
  overflow-wrap: anywhere;
}

/* Selo de tipo de acesso */
.sys-ia-access {
  font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--sys-border); color: var(--sys-fg-muted); background: var(--sys-bg-alt);
}
.sys-ia-access[data-access="gratuito"] { color: #0F7B4F; border-color: #0F7B4F; }
.sys-ia-access[data-access="aberto"] { color: var(--sys-cyan-700); border-color: var(--sys-cyan-700); }
.sys-ia-access[data-access="pago"] { color: #B45309; border-color: #B45309; }
html[data-theme="dark"] .sys-ia-access[data-access="gratuito"] { color: #5FD0A6; border-color: #5FD0A6; }
html[data-theme="dark"] .sys-ia-access[data-access="aberto"] { color: var(--sys-cyan-400); border-color: var(--sys-cyan-400); }
html[data-theme="dark"] .sys-ia-access[data-access="pago"] { color: #E3B457; border-color: #E3B457; }

/* Seção de habilidade */
.sys-ia-section { padding-block: 2rem; scroll-margin-top: 170px; }
.sys-ia-section[hidden] { display: none; }

/* Aviso de escopo */
.sys-ia-scope {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--sys-bg-alt); border: 1px solid var(--sys-border);
  border-left: var(--sys-rule) solid var(--sys-cyan);
  padding: .95rem 1.15rem; font-size: .875rem; color: var(--sys-fg-soft);
  border-radius: 0 var(--sys-radius) var(--sys-radius) 0;
}
.sys-ia-scope svg { width: 18px; height: 18px; flex: none; color: var(--sys-cyan-700); margin-top: .15rem; }
html[data-theme="dark"] .sys-ia-scope svg { color: var(--sys-cyan-400); }

/* Estado vazio da busca */
.sys-ia-empty { display: none; }
.sys-ia-empty[data-visible="true"] { display: block; }

/* -------------------------------------------------------------------------
   12. Busca
   ---------------------------------------------------------------------- */
.sys-searchpage { padding-block: 2rem 3rem; max-width: 52rem; }
.sys-search-form { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.sys-search-form input[type="search"] { flex: 1 1 auto; }
.sys-results { list-style: none; margin: 0; padding: 0; }
.sys-results li { padding: 1.15rem 0; border-bottom: 1px solid var(--sys-border); display: grid; gap: .35rem; }
.sys-results h2 { font-size: 1.125rem; line-height: 1.3; }
.sys-results h2 a { color: inherit; text-decoration: none; }
.sys-results h2 a:hover { color: var(--sys-link); text-decoration: underline; }
.sys-results p { margin: 0; font-size: .9375rem; color: var(--sys-fg-soft); }
.sys-noscript {
  border: 1px solid var(--sys-border); border-left: var(--sys-rule) solid var(--sys-alert);
  background: var(--sys-bg-alt); padding: 1rem 1.15rem; font-size: .9375rem; margin-block: 1rem;
}

/* -------------------------------------------------------------------------
   13. Newsletter
   ---------------------------------------------------------------------- */
.sys-newsletter { background: var(--sys-ink-800); color: #E9F1F9; padding-block: 2.5rem; }
html[data-theme="dark"] .sys-newsletter { background: #0D1826; }
.sys-newsletter__grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 992px) { .sys-newsletter__grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.sys-newsletter__title { color: #fff; font-size: 1.5rem; }
.sys-newsletter__text { color: #B9CCE0; margin: .6rem 0 0; font-size: .9375rem; }
.sys-newsletter__form { display: grid; gap: .6rem; }
@media (min-width: 576px) { .sys-newsletter__form { grid-template-columns: 1fr auto; align-items: end; } }
.sys-newsletter__form label { font-size: .75rem; font-weight: 700; color: #B9CCE0; display: block; margin-bottom: .3rem; }
.sys-newsletter__form input {
  width: 100%; background: var(--sys-ink-950); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; padding: .65rem .8rem; border-radius: var(--sys-radius); font-size: .9375rem;
}
.sys-newsletter__form input::placeholder { color: #7D93AC; }
.sys-newsletter__note { grid-column: 1 / -1; font-size: .75rem; color: #8CA3BC; margin: 0; }

/* -------------------------------------------------------------------------
   14. Publicidade (reservas de layout)
   ---------------------------------------------------------------------- */
.sys-ad { display: grid; justify-items: center; gap: .35rem; margin-inline: auto; }
.sys-ad__label {
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sys-fg-muted); font-weight: 700;
}
.sys-ad__slot {
  width: 100%; background: var(--sys-bg-alt);
  border: 1px dashed var(--sys-line-strong);
  display: grid; place-items: center;
  color: var(--sys-fg-muted); font-size: .75rem;
  border-radius: var(--sys-radius);
}
.sys-ad--leaderboard { max-width: 970px; }
.sys-ad--leaderboard .sys-ad__slot { height: 100px; }
@media (min-width: 992px) { .sys-ad--leaderboard .sys-ad__slot { height: 250px; } }
.sys-ad--rectangle { max-width: 336px; }
.sys-ad--rectangle .sys-ad__slot { height: 280px; }
.sys-ad--halfpage { max-width: 300px; }
.sys-ad--halfpage .sys-ad__slot { height: 600px; }
.sys-ad--inline { max-width: 728px; }
.sys-ad--inline .sys-ad__slot { height: 90px; }
.sys-ad-wrap { padding-block: 1.75rem; }
.sys-ad-wrap--tight { padding-block: 1rem; }

/* -------------------------------------------------------------------------
   14b. Consentimento de cookies
   -------------------------------------------------------------------------
   Faixa fixa no rodapé da janela, criada por assets/js/sysinfo.js quando o
   visitante ainda não escolheu.

   position:fixed é essencial: a faixa aparece depois que a página já
   renderizou, e se ocupasse espaço no fluxo empurraria o conteúdo para
   baixo, gerando deslocamento de layout (CLS) justamente na métrica que o
   Google mede. Fixa, ela flutua sobre a página e não desloca nada.

   Os dois botões são visualmente idênticos de propósito. A LGPD exige que
   recusar seja tão fácil quanto aceitar, e destacar "Aceitar" com cor de
   destaque enquanto "Recusar" fica apagado é exatamente o padrão escuro que
   a regra existe para impedir.
   ---------------------------------------------------------------------- */
.sys-consent {
  position: fixed;
  z-index: 1080;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--sys-paper);
  border-top: var(--sys-rule) solid var(--sys-cyan);
  box-shadow: 0 -8px 32px rgba(10, 22, 38, .18);
}
html[data-theme="dark"] .sys-consent {
  background: var(--sys-surface-2);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .5);
}
.sys-consent__inner {
  max-width: 1580px;
  margin-inline: auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
}
.sys-consent__texto { flex: 1 1 30rem; min-width: 0; }
.sys-consent__titulo {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sys-cyan-700);
  margin: 0 0 .3rem;
}
html[data-theme="dark"] .sys-consent__titulo { color: var(--sys-cyan-400); }
/* A cor aqui é var(--sys-fg), que troca junto com o tema, e NÃO um azul-tinta
   fixo da paleta.

   Era var(--sys-ink-700) até 30/08/2026, e no tema escuro isso deixava o
   texto rgb(22,48,79) sobre um fundo rgb(22,39,58): contraste de cerca de
   1,05:1, ou seja, o aviso ficava invisível. Só o título e os botões
   apareciam. Não era um detalhe estético: este é o texto que explica quais
   cookies serão gravados, e a pessoa precisa conseguir lê-lo ANTES de
   escolher entre recusar e aceitar. Consentimento que não pode ser lido não
   é consentimento informado.

   Os tokens --sys-ink-* são cores fixas da paleta, pensadas para fundo claro.
   Em qualquer texto que apareça nos dois temas, use --sys-fg / --sys-fg-soft
   / --sys-fg-muted, que já são redefinidos no bloco do tema escuro. */
.sys-consent__texto p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--sys-fg);
}
.sys-consent__acoes {
  display: flex;
  gap: .6rem;
  flex: 0 0 auto;
}
.sys-consent__btn {
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  padding: .6rem 1.5rem;
  min-width: 8.5rem;
  border-radius: var(--sys-radius);
  border: 1px solid var(--sys-line-strong);
  background: var(--sys-surface);
  color: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.sys-consent__btn:hover {
  background: var(--sys-surface-2);
  border-color: var(--sys-cyan);
}

/* Controle permanente no rodapé, para mudar de ideia depois. */
.sys-consent__link {
  font: inherit;
  font-size: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.sys-consent__link:hover { color: var(--sys-cyan-400); }

@media (max-width: 575.98px) {
  .sys-consent__inner { padding: 1rem; }
  .sys-consent__acoes { width: 100%; }
  .sys-consent__btn { flex: 1 1 0; min-width: 0; padding-inline: .5rem; }
}

/* -------------------------------------------------------------------------
   15. Módulos de dados: vagas, agenda e cotações

   Componentes compartilhados pelos três módulos orientados a dados do
   portal (/vagas-pelo-mundo/, /agenda-tech/ e /criptomoedas/): a barra de
   filtros, a grade de cartões, os selos de status, a linha de metadados,
   os blocos de estado (carregando/erro/vazio) e a paginação. A tabela de
   cotações usa um bloco próprio, no fim desta seção.

   Nota de numeração: esta seção fica logo antes do rodapé, como pedido,
   por isso o rodapé (antiga seção 15) e os utilitários (antiga seção 16)
   foram renumerados para 16 e 17 - a numeração das seções continua
   sequencial da primeira à última.
   ---------------------------------------------------------------------- */

/* Barra de filtros: sticky no desktop (mesma lógica da barra do Guia de
   IA, seção 11b), empilhada no celular porque ali não sobra largura para
   seis ou sete campos lado a lado. */
.sys-mod-filtros {
  position: sticky;
  top: 100px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  align-items: center;
  background: var(--sys-bg);
  border-bottom: 1px solid var(--sys-border);
  padding-block: .9rem;
  margin-bottom: .5rem;
}
.sys-mod-filtros[hidden] { display: none; }
.sys-mod-filtros .sys-input,
.sys-mod-filtros .sys-select { width: auto; flex: 1 1 180px; max-width: 260px; }
.sys-mod-filtros input[type="search"] { flex: 2 1 240px; max-width: 380px; }
.sys-mod-filtros label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; color: var(--sys-fg-soft); cursor: pointer; white-space: nowrap;
}
.sys-mod-filtros input[type="checkbox"] { accent-color: var(--sys-cyan); }

@media (max-width: 767.98px) {
  .sys-mod-filtros {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }
  .sys-mod-filtros .sys-input,
  .sys-mod-filtros .sys-select,
  .sys-mod-filtros input[type="search"] { max-width: none; flex-basis: auto; }
}

/* Grade de cartões: mesma construção em grade com fios de 1px que o Guia
   de IA e o mosaico de ferramentas já usam (seções 9 e 11b) - consistência
   visual entre os módulos do portal. */
.sys-mod-grid {
  display: grid;
  gap: 1px;
  background: var(--sys-border);
  border: 1px solid var(--sys-border);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sys-mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sys-mod-grid { grid-template-columns: repeat(3, 1fr); } }

.sys-mod-card {
  background: var(--sys-panel);
  padding: 1.05rem 1.15rem 1.15rem;
  display: grid;
  gap: .4rem;
  align-content: start;
  border-top: 3px solid transparent;
}
.sys-mod-card:hover { background: var(--sys-bg-alt); border-top-color: var(--sys-cat); }
.sys-mod-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
}
.sys-mod-card__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.28; letter-spacing: -.01em; }
.sys-mod-card__empresa { font-size: .875rem; font-weight: 700; color: var(--sys-fg-soft); }
.sys-mod-card__linha { font-size: .875rem; color: var(--sys-fg-soft); line-height: 1.5; margin: 0; }

/* Estado tri-valorado (sim / não / não informado) do visto e da realocação.
   "Não informado" usa itálico e cor apagada de propósito: é um terceiro
   estado real, não um "não" disfarçado, e o itálico marca visualmente essa
   diferença sem precisar de outro selo. */
.sys-mod-card__linha[data-tri="sim"] { color: var(--sys-ok); font-weight: 600; }
.sys-mod-card__linha[data-tri="nao"] { color: var(--sys-fg-soft); }
.sys-mod-card__linha[data-tri="desconhecido"] { color: var(--sys-fg-muted); font-style: italic; }

/* Selos: status de evento, e o selo fixo de "Demonstração" que aparece em
   todo item com demo:true, nos três módulos. */
.sys-mod-selo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--sys-border); color: var(--sys-fg-muted); background: var(--sys-bg-alt);
}
.sys-mod-selo[data-estado="neutro"] { color: var(--sys-cyan-700); border-color: var(--sys-cyan-700); }
html[data-theme="dark"] .sys-mod-selo[data-estado="neutro"] { color: var(--sys-cyan-400); border-color: var(--sys-cyan-400); }
/* Adiado e cancelado pedem destaque diferente dos demais status - mesmo
   tom de alerta usado no resto do portal (var(--sys-alert)). */
.sys-mod-selo[data-estado="alerta"] {
  color: #fff; background: var(--sys-alert); border-color: var(--sys-alert);
}
/* Selo de demonstração: as mesmas cores do aviso de conteúdo demonstrativo
   já usado no cabeçalho do site (seção 4, .sys-demo), para que "isto é
   demonstração" signifique sempre a mesma cor em todo o portal. */
.sys-mod-selo[data-estado="demo"] {
  color: #6B4E06; background: #FFF8E6; border-color: #F0DFAE;
}
html[data-theme="dark"] .sys-mod-selo[data-estado="demo"] {
  color: #EBD79A; background: #241E0B; border-color: #4A3D10;
}

/* Linha de metadados do cartão: reaproveita o espaçamento e o separador em
   ponto (.sys-meta__dot, seção 5) para não duplicar a mesma marcação com
   outro nome. */
.sys-mod-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .75rem; color: var(--sys-fg-muted);
}
.sys-mod-meta b { color: var(--sys-fg); font-weight: 800; }

/* Blocos de estado: carregando, erro e vazio.
   Altura mínima reservada de propósito - a lista some e os cartões chegam
   depois de um fetch, e sem essa reserva a página pula (CLS) no exato
   momento em que os dados aparecem. */
.sys-mod-estado {
  min-height: 220px;
  display: grid; place-items: center; text-align: center; gap: .5rem;
  padding: 1.75rem 1.25rem;
  border: 1px dashed var(--sys-line-strong); border-radius: var(--sys-radius);
  color: var(--sys-fg-muted); font-size: .9375rem;
}
.sys-mod-estado[hidden] { display: none; }
.sys-mod-estado--erro {
  border-style: solid; border-color: var(--sys-border);
  border-left: var(--sys-rule) solid var(--sys-alert);
  color: var(--sys-fg-soft); text-align: left; justify-items: start;
}
.sys-mod-estado--vazio { border-style: dashed; }

/* Paginação: mesmos botões acessíveis do resto do portal (seção 11,
   .sys-pagination), mas como <button> em vez de <a>, porque aqui não há
   uma URL por página - é filtragem no cliente. */
.sys-mod-paginacao { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; padding-block: 2rem; }
.sys-mod-pg-btn {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sys-border); border-radius: var(--sys-radius);
  background: var(--sys-panel); color: var(--sys-fg);
  font-size: .875rem; font-weight: 700; padding-inline: .6rem; cursor: pointer;
}
.sys-mod-pg-btn:hover { border-color: var(--sys-fg-muted); background: var(--sys-bg-alt); }
.sys-mod-pg-btn[aria-current="page"] { background: var(--sys-ink-900); border-color: var(--sys-ink-900); color: #fff; }
.sys-mod-pg-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Tabela de cotações de criptomoedas. */
.sys-cripto-tabela-wrap {
  /* Rolagem horizontal no celular: seis colunas numéricas não cabem numa
     tela estreita, e encolher a fonte até caber prejudicaria a leitura. */
  overflow-x: auto;
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius);
}
.sys-cripto-tabela {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .875rem;
}
.sys-cripto-tabela th, .sys-cripto-tabela td {
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--sys-border);
  white-space: nowrap;
}
.sys-cripto-tabela thead th {
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sys-fg-muted); background: var(--sys-bg-alt);
}
.sys-cripto-tabela tbody tr:last-child td { border-bottom: 0; }
/* Célula sem dado: nunca zero, nunca inventado - só o texto "sem dados",
   em itálico e apagado, para não parecer um valor real na tabela. */
.sys-cripto-semdado { color: var(--sys-fg-muted); font-style: italic; }
/* Preparado para quando houver cotação real: variação positiva em verde,
   negativa em vermelho. Só entra em jogo quando o valor não é null. */
.sys-cripto-alta { color: var(--sys-ok); font-weight: 700; }
.sys-cripto-baixa { color: var(--sys-alert); font-weight: 700; }

.sys-cripto-aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  background: #FFF8E6; border: 1px solid #F0DFAE;
  border-left: var(--sys-rule) solid #B45309;
  padding: .85rem 1rem; font-size: .875rem; color: #6B4E06;
  border-radius: 0 var(--sys-radius) var(--sys-radius) 0;
  margin-bottom: 1rem;
}
.sys-cripto-aviso[hidden] { display: none; }
html[data-theme="dark"] .sys-cripto-aviso {
  background: #241E0B; border-color: #4A3D10; color: #EBD79A;
}

/* -------------------------------------------------------------------------
   16. Destaque: Agenda Tech e Boas Notícias

   Bloco de duas colunas na home, lado a lado em telas grandes e empilhado
   no celular: a agenda do mês corrente em lista compacta (sem cartões) e a
   matéria mais recente da editoria boas-noticias em destaque. Cada coluna
   é uma <section> própria (ver o HTML), então aqui só entra layout e a
   lista compacta de eventos - o cartão da boa notícia reaproveita .sys-card
   e .sys-card--lg, já existentes na seção 5.
   ---------------------------------------------------------------------- */
.sys-duo { display: grid; gap: 2rem; }
@media (min-width: 992px) {
  .sys-duo { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
  .sys-duo__col:last-child { border-left: 1px solid var(--sys-border); padding-left: 2.5rem; }
}

/* Lista compacta da agenda: só data, nome, cidade/país e modalidade -
   sem imagem e sem resumo, para caber ao lado do destaque editorial. */
.sys-agenda-mini { list-style: none; margin: 0; padding: 0; }
.sys-agenda-mini__item {
  padding: .85rem 0; border-bottom: 1px solid var(--sys-border);
  display: grid; gap: .25rem;
}
.sys-agenda-mini__item:first-child { padding-top: 0; }
.sys-agenda-mini__item:last-child { border-bottom: 0; padding-bottom: 0; }
.sys-agenda-mini__data {
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
  color: var(--sys-cat); font-variant-numeric: tabular-nums; margin: 0;
}
.sys-agenda-mini__nome { font-size: .9375rem; font-weight: 700; line-height: 1.3; margin: 0; }
/* O nome do evento leva ao site do organizador, que é o único canal de
   inscrição. O link herda a cor do texto para a lista não virar um bloco
   azul: o sublinhado no hover já sinaliza que é clicável. */
.sys-agenda-mini__nome a { color: inherit; text-decoration: none; }
.sys-agenda-mini__nome a:hover { color: var(--sys-link); text-decoration: underline; }
.sys-agenda-mini__local { font-size: .8125rem; color: var(--sys-fg-muted); margin: 0; }

/* -------------------------------------------------------------------------
   16. Chamada do diagnóstico de site na home

   Faixa estreita, logo abaixo da barra de Boa Notícia e antes do painel de
   cotações. É a porta da ferramenta gratuita.

   O CUIDADO PRINCIPAL AQUI É DE ALTURA

   Cada bloco acrescentado antes da manchete empurra a notícia principal para
   baixo, e a manchete é o motivo pelo qual alguém abre um portal. Por isso
   esta faixa é de UMA linha em telas grandes: título à esquerda, campo e
   botão à direita, na mesma altura. Não é um hero, é uma barra.

   O fundo escuro separa a ferramenta do conteúdo editorial sem precisar de
   moldura: ao rolar, fica claro onde o jornal começa.
   ---------------------------------------------------------------------- */
.sys-diagcta {
  background: var(--sys-ink-900);
  border-bottom: var(--sys-rule) solid var(--sys-cyan);
  padding-block: 1.1rem;
  color: #E7EEF6;
}
.sys-diagcta__inner {
  display: grid; gap: .9rem; align-items: center;
}
@media (min-width: 900px) {
  .sys-diagcta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem; }
}
.sys-diagcta__texto { min-width: 0; }
.sys-diagcta__eyebrow {
  font-size: .625rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sys-cyan-400); margin: 0 0 .2rem;
}
.sys-diagcta__titulo {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  color: #fff; margin: 0; line-height: 1.2;
}
.sys-diagcta__desc {
  font-size: .875rem; color: #A8BCD4; margin: .2rem 0 0; line-height: 1.45;
}
.sys-diagcta__form { display: flex; gap: .5rem; min-width: 0; }
.sys-diagcta__form .sys-input {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.sys-diagcta__form .sys-input::placeholder { color: #7E93AC; }
/* O foco precisa ser visível sobre fundo escuro: a borda azul do tema claro
   some aqui, então o anel vem do outline. */
.sys-diagcta__form .sys-input:focus {
  border-color: var(--sys-cyan-400);
  outline: 2px solid var(--sys-cyan-400);
  outline-offset: 1px;
}
.sys-diagcta__form .sys-btn { flex: none; }
@media (max-width: 899.98px) {
  .sys-diagcta__form .sys-btn { min-height: 44px; }
  .sys-diagcta__form .sys-input { min-height: 44px; }
}
/* Numa folha impressa a barra não tem função: ninguém digita no papel. */
@media print { .sys-diagcta { display: none; } }

/* -------------------------------------------------------------------------
   16a. Painel do topo da home

   Três colunas antes da manchete: cotações de criptomoedas, Agenda Tech e
   Vagas pelo Mundo. Duas delas são carregadas ao vivo (CoinGecko e Remotive);
   a agenda é estática, vinda de assets/data/eventos.json.

   POR QUE TRÊS COLUNAS E NÃO TRÊS FAIXAS

   Empilhadas em faixas de largura inteira, as três empurrariam a manchete
   para bem abaixo da primeira tela, e a manchete é o motivo pelo qual alguém
   abre um portal de notícias. Lado a lado, o conjunto ocupa a altura de uma
   só e o leitor vê tudo de uma vez: o preço do Bitcoin, o próximo evento e a
   primeira vaga, sem rolar.

   A partir de 992px são três colunas com fios de separação entre elas. Abaixo
   disso viram três blocos empilhados, porque três colunas num celular
   deixariam cada uma estreita demais para um título de vaga caber.
   ---------------------------------------------------------------------- */
.sys-topo {
  background: var(--sys-bg-alt);
  border-bottom: 1px solid var(--sys-border);
  padding-block: 1.35rem 1.5rem;
}
.sys-topo__grid { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
  .sys-topo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  /* Fio entre colunas, e não borda em volta de cada uma: separa sem
     transformar o painel em três caixas concorrendo com os cartões da
     manchete logo abaixo. */
  .sys-topo__col + .sys-topo__col {
    border-left: 1px solid var(--sys-border); padding-left: 2rem;
  }
}
.sys-topo__col { min-width: 0; }
.sys-topo__col[hidden] { display: none; }

/* --- Espaço reservado para as colunas ao vivo ---
   As colunas de Criptomoedas e de Vagas só recebem conteúdo depois de uma
   ida à rede. Elas nasciam com [hidden] e apareciam prontas, o que parecia
   elegante e custava caro: medido em 31/08/2026, numa tela estreita as duas
   juntas acrescentavam 575px de uma vez, ou seja 57% da altura visível, e
   empurravam a home inteira para baixo depois que a pessoa já tinha começado
   a ler. O Lighthouse mediu CLS de 0,391 no celular por causa disso, contra
   0,069 no computador, onde as três colunas ficam lado a lado e a altura da
   linha é ditada pela Agenda, que é estática.

   Agora o espaço é reservado desde o primeiro quadro, com a altura que o
   conteúdo real vai ocupar. A coluna só some se a consulta FALHAR - aí o
   deslocamento acontece, mas é a exceção, e some é melhor que ficar um buraco
   vazio na página.

   Se o conteúdo dessas colunas mudar de tamanho (mais moedas, mais vagas),
   estes valores precisam mudar junto, senão volta a sobrar ou faltar espaço. */
.sys-topo__col[data-carregando] { min-height: 217px; }
.sys-topo__col[data-carregando].sys-home-vagas { min-height: 310px; }
@media (min-width: 992px) {
  /* Lado a lado, a altura da linha é a da coluna mais alta (a Agenda), então
     reservar altura por coluna deixa de ser necessário. */
  .sys-topo__col[data-carregando] { min-height: 0; }
}
.sys-topo__col[data-carregando] .sys-cotacoes__lista,
.sys-topo__col[data-carregando] .sys-home-vagas__lista { min-height: 1px; }
.sys-topo__carregando {
  font-size: .8125rem; color: var(--sys-fg-muted); margin: .75rem 0 0;
}
.sys-topo__col:not([data-carregando]) .sys-topo__carregando { display: none; }

.sys-topo__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem;
  border-bottom: 1px solid var(--sys-border); padding-bottom: .5rem;
}
.sys-topo__titulo {
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sys-fg-soft); margin: 0;
}
.sys-topo__link { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sys-topo__status {
  font-size: .6875rem; color: var(--sys-fg-muted);
  margin: .75rem 0 0; line-height: 1.45;
}

/* Cotações dentro do painel: uma por linha, em três colunas de texto
   (sigla / preço / variação) alinhadas pela mesma base. O nome por extenso
   some, porque a sigla já identifica o ativo e o espaço aqui é estreito. */
.sys-topo .sys-cotacoes__lista { display: block; }
.sys-topo .sys-cotacao {
  display: grid; grid-template-columns: auto 1fr auto;
  column-gap: .65rem; align-items: baseline;
  padding: .42rem 0; border-bottom: 1px solid var(--sys-border);
}
.sys-topo .sys-cotacao:last-child { border-bottom: 0; padding-bottom: 0; }
.sys-topo .sys-cotacao__nome-longo,
.sys-topo .sys-cotacao__janela { display: none; }
.sys-topo .sys-cotacao__nome { font-size: .8125rem; }
.sys-topo .sys-cotacao__preco {
  font-size: .9375rem; text-align: right; margin-top: 0 !important;
}
.sys-topo .sys-cotacao__var { font-size: .75rem; text-align: right; margin-top: 0 !important; }

/* Vagas dentro do painel: sem o fio colorido no topo de cada cartão, que a
   esta escala viraria só ruído, e com um fio fino separando uma da outra. */
.sys-topo .sys-home-vagas__lista { display: block; margin-top: 0; }
.sys-topo .sys-vaga-mini {
  border-top: 0; border-bottom: 1px solid var(--sys-border);
  padding: .55rem 0;
}
.sys-topo .sys-vaga-mini:first-child { padding-top: 0; }
.sys-topo .sys-vaga-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.sys-topo .sys-vaga-mini__titulo { font-size: .875rem; margin-bottom: .15rem; }
.sys-topo .sys-vaga-mini__empresa { font-size: .8125rem; }
.sys-topo .sys-vaga-mini__meta { font-size: .75rem; }
.sys-topo .sys-home-vagas__status { font-size: .6875rem; margin-top: .75rem; }

/* -------------------------------------------------------------------------
   16b. Faixa de cotações da home

   Quatro moedas em reais, logo abaixo da manchete. É a versão curta do painel
   de /criptomoedas/ e usa os mesmos dados (ver assets/js/home-cotacoes.js).

   A faixa nasce com [hidden] no HTML e só aparece quando o JavaScript
   consegue dados de verdade. Isso é deliberado: uma faixa de cotações vazia,
   ou com esqueleto de carregamento eterno, é pior que faixa nenhuma - ela
   ocupa o espaço mais valioso da página logo abaixo da manchete e não informa
   nada. Sem JavaScript, sem rede ou com a CoinGecko fora do ar e sem cache, o
   bloco simplesmente não existe para o leitor.
   ---------------------------------------------------------------------- */
.sys-cotacoes {
  background: var(--sys-bg-alt);
  border-block: 1px solid var(--sys-border);
  padding-block: 1.1rem;
  margin-block: 2rem;
}
.sys-cotacoes[hidden] { display: none; }

.sys-cotacoes__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.sys-cotacoes__titulo {
  font-size: .6875rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sys-fg-muted); margin: 0;
}

/* Grade de 2 colunas no celular e 4 a partir de 768px. Nunca 1 coluna: uma
   cotação sozinha por linha alonga demais a faixa e ela deixa de ler como
   faixa. */
.sys-cotacoes__lista {
  display: grid; gap: .85rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .sys-cotacoes__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

.sys-cotacao { min-width: 0; }
.sys-cotacao p { margin: 0; }
.sys-cotacao__nome {
  font-size: .75rem; color: var(--sys-fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-cotacao__sigla { font-weight: 800; color: var(--sys-fg-soft); }

/* tabular-nums mantém os preços alinhados entre si mesmo quando os dígitos
   mudam a cada coleta, e evita o pulinho de largura quando o número troca. */
.sys-cotacao__preco {
  font-size: 1.0625rem; font-weight: 800; line-height: 1.3;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  margin-top: .15rem !important;
}
.sys-cotacao__var {
  font-size: .8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-top: .1rem !important;
}
/* A cor sozinha não pode ser o único sinal de alta ou baixa: o número já
   carrega o sinal de + ou -, e a seta reforça a leitura para quem não
   distingue as duas cores. */
.sys-cotacao__var--alta { color: var(--sys-ok); }
.sys-cotacao__var--baixa { color: var(--sys-alert); }
.sys-cotacao__janela { font-weight: 500; color: var(--sys-fg-muted); }
.sys-cotacao__semdado { color: var(--sys-fg-muted); font-weight: 500; }

.sys-cotacoes__status {
  font-size: .75rem; color: var(--sys-fg-muted);
  margin: .85rem 0 0; line-height: 1.5;
}

/* -------------------------------------------------------------------------
   16c. Vagas em destaque na home

   Quatro vagas reais da Remotive. O bloco nasce com [hidden] pelo mesmo
   motivo da faixa de cotações: sem dados ao vivo, a seção fica só com o texto
   estático que aponta para o módulo completo, que continua fazendo sentido
   sozinho.

   O link de cada card vai para o anúncio original na Remotive, o que a
   licença da API exige. Ver o cabeçalho de assets/js/home-vagas.js.
   ---------------------------------------------------------------------- */
.sys-home-vagas[hidden] { display: none; }
.sys-home-vagas__lista {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 1.25rem;
}
.sys-vaga-mini {
  border-top: var(--sys-rule) solid var(--sys-cat);
  padding-top: .85rem; min-width: 0;
}
.sys-vaga-mini__titulo {
  font-size: 1rem; font-weight: 800; line-height: 1.3;
  letter-spacing: -.01em; margin: 0 0 .35rem;
}
.sys-vaga-mini__titulo a { color: inherit; text-decoration: none; }
.sys-vaga-mini__titulo a:hover { color: var(--sys-link); text-decoration: underline; }
.sys-vaga-mini__empresa {
  font-size: .875rem; font-weight: 700; color: var(--sys-fg-soft); margin: 0 0 .2rem;
}
.sys-vaga-mini__meta {
  font-size: .8125rem; color: var(--sys-fg-muted); margin: 0; line-height: 1.5;
}
.sys-home-vagas__status {
  font-size: .75rem; color: var(--sys-fg-muted); margin: 1.25rem 0 0; line-height: 1.5;
}

/* -------------------------------------------------------------------------
   16d. Diagnóstico de site (/diagnostico-de-site/)

   Componentes exclusivos da página de diagnóstico. Tudo o mais - botões,
   campos, cabeçalho de página, blocos de documentação, FAQ - reaproveita as
   classes já existentes (.sys-btn, .sys-field, .sys-pagehead, .sys-doc,
   .sys-faq), para a ferramenta parecer parte do site e não um enxerto.

   ESTADO NUNCA É COMUNICADO SÓ POR COR

   Todo elemento com data-estado traz também um ícone e a palavra do estado
   ("Excelente", "Atenção", "Crítico"). A cor aqui reforça; não informa
   sozinha. Isso vale para quem não distingue as cores e para quem lê a
   página por leitor de tela.
   ---------------------------------------------------------------------- */

/* Cores de estado, definidas uma vez e reutilizadas por todos os blocos. */
.sys-diag-card,
.sys-diag-bloco,
.sys-diag-selo,
.sys-diag-metrica,
.sys-diag-problema {
  --est: var(--sys-fg-muted);
}
[data-estado="excelente"] { --est: var(--sys-ok); }
[data-estado="bom"] { --est: var(--sys-cyan-700); }
[data-estado="atencao"] { --est: #B26A00; }
[data-estado="critico"] { --est: var(--sys-alert); }
[data-estado="nao-disponivel"], [data-estado="nao-testado"],
[data-estado="informativo"] { --est: var(--sys-fg-muted); }
html[data-theme="dark"] [data-estado="bom"] { --est: var(--sys-cyan-400); }
html[data-theme="dark"] [data-estado="atencao"] { --est: #E0A33A; }

/* --- Formulário --- */
.sys-diag-form { display: grid; gap: 1rem; }
.sys-diag-form__linha { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.sys-diag-form__campo { flex: 1 1 22rem; min-width: 0; }
.sys-diag-erro {
  border-left: 3px solid var(--sys-alert);
  background: var(--sys-bg-alt);
  padding: .75rem 1rem; font-size: .9375rem; color: var(--sys-fg);
}
.sys-diag-erro[hidden] { display: none; }
/* --- Campo do seletor DKIM, sempre visível --- */
.sys-diag-dkim { max-width: 26rem; margin-top: .25rem; }
.sys-diag-dkim__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
/* Link de ajuda: é <button> porque abre um diálogo, não navega para lugar
   nenhum. Parece link porque a ação é de leitura, não de comando. */
.sys-diag-ajuda-link {
  font: inherit; font-size: .8125rem; font-weight: 700;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sys-link); text-decoration: underline;
  text-underline-offset: .18em;
}
.sys-diag-ajuda-link:hover { color: var(--sys-link-hover); }

/* --- Modal de ajuda --- */
.sys-diag-modal {
  border: 1px solid var(--sys-border);
  border-top: var(--sys-rule) solid var(--sys-cyan);
  border-radius: var(--sys-radius-lg);
  background: var(--sys-panel); color: var(--sys-fg);
  padding: 0; max-width: 40rem; width: calc(100vw - 2rem);
  box-shadow: 0 20px 60px rgba(10, 22, 38, .28);
}
.sys-diag-modal::backdrop { background: rgba(5, 13, 24, .55); }
.sys-diag-modal__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--sys-border);
}
.sys-diag-modal__titulo { font-size: 1.125rem; margin: 0; }
.sys-diag-modal__fechar {
  font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
  background: var(--sys-bg-alt); color: var(--sys-fg-soft);
  border: 1px solid var(--sys-border); border-radius: var(--sys-radius);
  padding: .4rem .75rem; min-height: 36px;
}
.sys-diag-modal__fechar:hover { color: var(--sys-fg); border-color: var(--sys-fg-muted); }
.sys-diag-modal__corpo {
  padding: 1rem 1.25rem 1.25rem;
  font-size: .9375rem; line-height: 1.65; color: var(--sys-fg-soft);
  /* Se o texto crescer, rola dentro do modal em vez de estourar a tela. */
  max-height: min(70vh, 34rem); overflow-y: auto;
}
.sys-diag-modal__corpo p { margin: 0 0 .75rem; }
.sys-diag-modal__corpo p:last-child { margin-bottom: 0; }
.sys-diag-modal__corpo strong { color: var(--sys-fg); }
.sys-diag-modal__corpo ol { margin: 0 0 .75rem; padding-left: 1.35rem; }
.sys-diag-modal__corpo li { margin-bottom: .35rem; }
.sys-diag-modal__corpo code {
  font-family: var(--sys-font-mono); font-size: .8125rem;
  background: var(--sys-bg-alt); border: 1px solid var(--sys-border);
  border-radius: 2px; padding: .05rem .3rem;
}
/* O exemplo de cabeçalho é longo: precisa quebrar em qualquer ponto. */
.sys-diag-modal__ex code { overflow-wrap: anywhere; word-break: break-word; }
@media print { .sys-diag-modal { display: none !important; } }
.sys-diag-avancado__corpo {
  border-left: 2px solid var(--sys-border); padding: .75rem 0 .25rem 1rem;
  margin-top: .5rem; display: grid; gap: .5rem; max-width: 40rem;
}

/* Explicação didática do campo. Blocos curtos, cada um respondendo uma
   pergunta, em vez de um parágrafo único: o texto anterior dizia tudo de uma
   vez e começava pela limitação técnica, o que não ajudava quem nunca ouviu
   falar de DKIM. */
.sys-diag-ajuda {
  font-size: .875rem; color: var(--sys-fg-soft); line-height: 1.6;
  border-left: 3px solid var(--sys-cyan-700); background: var(--sys-bg-alt);
  padding: .85rem 1rem; margin-top: .35rem;
}
html[data-theme="dark"] .sys-diag-ajuda { border-left-color: var(--sys-cyan-400); }
.sys-diag-ajuda p { margin: 0 0 .6rem; }
.sys-diag-ajuda p:last-child { margin-bottom: 0; }
.sys-diag-ajuda strong { color: var(--sys-fg); }
.sys-diag-ajuda ol { margin: 0 0 .6rem; padding-left: 1.35rem; }
.sys-diag-ajuda li { margin-bottom: .3rem; }
.sys-diag-ajuda code {
  font-family: var(--sys-font-mono); font-size: .8125rem;
  background: var(--sys-panel); border: 1px solid var(--sys-border);
  border-radius: 2px; padding: .05rem .3rem;
}
/* O exemplo de cabeçalho é longo e precisa poder quebrar em qualquer ponto,
   senão estoura a largura no celular. */
.sys-diag-ajuda__ex code { overflow-wrap: anywhere; word-break: break-word; }

/* --- Progresso --- */
.sys-diag-progresso[hidden] { display: none; }
.sys-diag-etapas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sys-diag-etapa {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9375rem; color: var(--sys-fg-muted);
}
.sys-diag-etapa__marca {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--sys-line-strong); background: transparent;
}
.sys-diag-etapa[data-estado="fazendo"] { color: var(--sys-fg); font-weight: 700; }
.sys-diag-etapa[data-estado="fazendo"] .sys-diag-etapa__marca {
  border-color: var(--sys-blue);
  border-top-color: transparent;
  animation: sys-diag-gira .7s linear infinite;
}
.sys-diag-etapa[data-estado="feito"] { color: var(--sys-fg-soft); }
.sys-diag-etapa[data-estado="feito"] .sys-diag-etapa__marca { border-color: var(--sys-ok); background: var(--sys-ok); }
.sys-diag-etapa[data-estado="alerta"] .sys-diag-etapa__marca { border-color: #B26A00; background: #B26A00; }
.sys-diag-etapa[data-estado="falhou"] .sys-diag-etapa__marca { border-color: var(--sys-alert); background: var(--sys-alert); }
@keyframes sys-diag-gira { to { transform: rotate(360deg); } }

/* Quem pediu menos animação não recebe o giro: o estado continua legível
   pela cor, pelo peso da fonte e pelo texto anunciado em aria-live. */
@media (prefers-reduced-motion: reduce) {
  .sys-diag-etapa[data-estado="fazendo"] .sys-diag-etapa__marca {
    animation: none; border-top-color: var(--sys-blue);
  }
}

/* --- Cabeçalho de marca, só no papel ---
   Na tela seria redundante: o cabeçalho do site está logo acima. No PDF, o
   relatório circula sozinho, anexado num chamado ou encaminhado por e-mail,
   e precisa dizer de onde veio e sobre qual domínio fala. */
.sys-diag-marca-print { display: none; }

/* --- Abas do relatório ---
   Separam o relatório por assunto. A aba "Tudo" reúne o relatório inteiro e é
   a que serve para ler de ponta a ponta e para gerar o PDF.

   As abas rolam horizontalmente no celular em vez de quebrar em várias
   linhas: uma fileira de nove botões empilhados em três linhas ocuparia meia
   tela antes de o conteúdo começar. */
/* Sem rolagem própria: as abas quebram em mais de uma linha quando não cabem.

   A primeira versão usava overflow-x: auto, o que parecia elegante numa
   fileira longa e produzia dois efeitos ruins. O navegador acrescentava
   também uma barra vertical dentro da faixa, visível como um traço no canto
   direito; e, quando a fileira estoura, as abas do fim ficam escondidas atrás
   de um gesto de rolagem que ninguém adivinha estar ali.

   Quebrar em duas linhas ocupa alguns pixels a mais e mostra todas as abas de
   uma vez, que é o ponto de existir uma fileira de abas. */
.sys-diag-abas {
  display: flex; flex-wrap: wrap; gap: .25rem;
  overflow: visible;
  border-bottom: 2px solid var(--sys-border);
  margin-bottom: .5rem; padding-bottom: 0;
}
.sys-diag-aba {
  font: inherit; font-size: .875rem; font-weight: 700;
  border: 0; background: none; color: var(--sys-fg-muted);
  padding: .6rem .85rem; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  min-height: 44px;
}
.sys-diag-aba:hover { color: var(--sys-fg); }
.sys-diag-aba[aria-selected="true"] {
  color: var(--sys-fg); border-bottom-color: var(--sys-accent);
}
.sys-diag-aba:focus-visible { outline: 2px solid var(--sys-accent); outline-offset: -2px; }

/* Na aba Tudo o relatório volta a ser um documento contínuo, e cada seção
   precisa da própria separação de volta. */
.sys-diag-relatorio[data-aba="__tudo"] .sys-diag-secao { border-top: 1px solid var(--sys-border); }
.sys-diag-relatorio:not([data-aba="__tudo"]) .sys-diag-secao { border-top: 0; padding-top: .5rem; }

/* --- Seções do relatório --- */
.sys-diag-relatorio[hidden] { display: none; }
.sys-diag-relatorio:focus { outline: none; }
.sys-diag-secao { padding-block: 1.75rem; border-top: 1px solid var(--sys-border); }
.sys-diag-secao__titulo {
  font-size: 1.375rem; letter-spacing: -.02em; margin: 0 0 1rem;
}
.sys-diag-alvo { font-size: .9375rem; color: var(--sys-fg-soft); margin: -.5rem 0 1rem; }
.sys-diag-grupo { margin-top: 1.5rem; }
.sys-diag-grupo__titulo {
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sys-fg-soft); margin: 1.5rem 0 .6rem;
}
.sys-diag-nota, .sys-diag-vazio {
  font-size: .875rem; color: var(--sys-fg-muted); margin: .5rem 0; line-height: 1.55;
}
.sys-diag-aviso {
  border-left: 3px solid #B26A00; background: var(--sys-bg-alt);
  padding: .85rem 1rem; margin: 1rem 0;
}
.sys-diag-aviso p { margin: 0; font-size: .9375rem; }
.sys-diag-aviso-forte { font-weight: 700; color: var(--sys-fg); }

/* --- Cartões de nota --- */
.sys-diag-cards {
  display: grid; gap: 1px; background: var(--sys-border);
  border: 1px solid var(--sys-border); margin-bottom: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .sys-diag-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sys-diag-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.sys-diag-card {
  background: var(--sys-panel); padding: .9rem .85rem 1rem;
  border-top: 3px solid var(--est); display: grid; gap: .2rem; align-content: start;
}
.sys-diag-card__titulo {
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sys-fg-muted); margin: 0;
}
.sys-diag-card__nota {
  font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin: 0; color: var(--sys-fg);
}
.sys-diag-card__estado,
.sys-diag-selo,
.sys-diag-metrica__estado {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 700; color: var(--est); margin: 0;
}
.sys-diag-card__estado svg,
.sys-diag-selo svg,
.sys-diag-metrica__estado svg { width: 14px; height: 14px; flex: none; }
.sys-diag-card__legenda { font-size: .6875rem; color: var(--sys-fg-muted); margin: 0; }

/* --- Checklist de verificações ---
   Uma linha por teste, com ícone, nome, valor apurado e a palavra do
   resultado. Cada linha é uma afirmação isolada, que se lê sozinha.

   O nome ocupa a coluna elástica e o valor fica à direita, com o resultado
   por último: quem escaneia a lista de cima a baixo lê a coluna de estados
   como uma coluna só, sem precisar atravessar o texto de cada linha.

   Em telas estreitas vira duas linhas, com o valor abaixo do nome, para o
   estado nunca ser espremido nem sair da largura. */
.sys-diag-checklist { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--sys-border); }
.sys-diag-check {
  display: grid; align-items: baseline; gap: .1rem .6rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--sys-border);
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icone nome estado" ". valor estado";
  font-size: .9375rem;
}
@media (min-width: 720px) {
  .sys-diag-check {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) 6.5rem;
    grid-template-areas: "icone nome valor estado";
    align-items: center;
  }
}
.sys-diag-check__icone { grid-area: icone; display: inline-flex; color: var(--est); }
.sys-diag-check__icone svg { width: 17px; height: 17px; }
.sys-diag-check__nome { grid-area: nome; min-width: 0; color: var(--sys-fg); }
.sys-diag-check__valor {
  grid-area: valor; min-width: 0;
  font-size: .8125rem; color: var(--sys-fg-muted);
}
@media (min-width: 720px) { .sys-diag-check__valor { text-align: right; } }
.sys-diag-check__estado {
  grid-area: estado; text-align: right; white-space: nowrap;
  font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--est);
}
/* Linha cinza fica um pouco recuada de peso: é informação, não resultado. */
.sys-diag-check[data-estado="nao-disponivel"] .sys-diag-check__nome,
.sys-diag-check[data-estado="nao-testado"] .sys-diag-check__nome,
.sys-diag-check[data-estado="informativo"] .sys-diag-check__nome { color: var(--sys-fg-soft); }

/* --- Blocos de registro (SPF, DMARC, DKIM, MX) --- */
.sys-diag-bloco {
  border: 1px solid var(--sys-border); border-left: 3px solid var(--est);
  padding: 1rem 1.15rem; margin-bottom: 1rem; background: var(--sys-panel);
}
.sys-diag-bloco__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.sys-diag-bloco__titulo { font-size: 1.0625rem; font-weight: 800; margin: 0; }
.sys-diag-bloco__resumo { font-size: .9375rem; margin: 0 0 .6rem; color: var(--sys-fg); }
.sys-diag-bloco__detalhe { font-size: .875rem; color: var(--sys-fg-soft); margin: .6rem 0 0; line-height: 1.6; }
.sys-diag-selo {
  border: 1px solid var(--est); border-radius: 2px; padding: .15rem .45rem;
  text-transform: uppercase; letter-spacing: .05em; font-size: .625rem; white-space: nowrap;
}
.sys-diag-lista { margin: .75rem 0 0; padding-left: 1.15rem; }
.sys-diag-lista li { font-size: .875rem; color: var(--sys-fg-soft); margin-bottom: .35rem; line-height: 1.55; }

.sys-diag-registro {
  display: flex; gap: .5rem; align-items: flex-start;
  background: var(--sys-bg-alt); border: 1px solid var(--sys-border);
  padding: .6rem .7rem; margin-top: .5rem;
}
.sys-diag-registro code { flex: 1 1 auto; min-width: 0; font-size: .8125rem; }

/* --- Texto longo de DNS: precisa quebrar em qualquer ponto, senão um
       registro TXT grande estoura a largura no celular. --- */
.sys-diag-quebra { overflow-wrap: anywhere; word-break: break-word; }
.sys-diag-mono { font-family: var(--sys-font-mono); font-size: .8125rem; }

/* --- Tabelas --- */
.sys-diag-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: .5rem; }
.sys-diag-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 30rem; }
.sys-diag-tabela th, .sys-diag-tabela td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--sys-border);
  vertical-align: top;
}
.sys-diag-tabela th {
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sys-fg-muted);
  border-bottom: 2px solid var(--sys-line-strong); white-space: nowrap;
}
.sys-diag-tabela tbody tr:hover { background: var(--sys-bg-alt); }
.sys-diag-col-acao { width: 1%; white-space: nowrap; }
.sys-diag-copy {
  font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--sys-border); background: var(--sys-bg-alt);
  color: var(--sys-fg-soft); border-radius: var(--sys-radius);
  padding: .25rem .5rem; min-height: 32px;
}
.sys-diag-copy:hover { border-color: var(--sys-fg-muted); color: var(--sys-fg); }

/* --- Lista de dados --- */
.sys-diag-dados {
  display: grid; gap: 0; margin: 0 0 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sys-diag-dados { grid-template-columns: minmax(11rem, auto) 1fr; } }
.sys-diag-dados dt {
  font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sys-fg-muted); padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--sys-border);
}
.sys-diag-dados dd {
  margin: 0; padding: .5rem 0; font-size: .875rem; color: var(--sys-fg);
  border-bottom: 1px solid var(--sys-border);
}
@media (max-width: 639.98px) {
  .sys-diag-dados dt { border-bottom: 0; padding-bottom: 0; }
}

/* --- Métricas --- */
.sys-diag-metricas {
  display: grid; gap: .75rem; margin: .75rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.sys-diag-metrica {
  border: 1px solid var(--sys-border); border-top: 3px solid var(--est);
  padding: .75rem .85rem; display: grid; gap: .2rem; align-content: start;
  background: var(--sys-panel); min-width: 0;
}
.sys-diag-metrica__nome { font-size: .75rem; font-weight: 800; color: var(--sys-fg-soft); margin: 0; }
.sys-diag-metrica__valor {
  font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 0;
}
.sys-diag-metrica__ajuda { font-size: .75rem; color: var(--sys-fg-muted); margin: .15rem 0 0; line-height: 1.45; }

/* --- Problemas --- */
.sys-diag-problemas { display: grid; gap: 0; border-top: 1px solid var(--sys-border); }
.sys-diag-problema { border-bottom: 1px solid var(--sys-border); }
.sys-diag-problema > summary {
  cursor: pointer; padding: .7rem .25rem; display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem; list-style: none;
}
.sys-diag-problema > summary::-webkit-details-marker { display: none; }
.sys-diag-problema > summary svg { width: 16px; height: 16px; flex: none; color: var(--est); }
.sys-diag-problema__titulo { flex: 1 1 auto; min-width: 0; }
.sys-diag-problema__economia {
  font-size: .75rem; font-weight: 800; color: var(--est); white-space: nowrap;
}
.sys-diag-problema__desc, .sys-diag-problema__nota {
  font-size: .875rem; color: var(--sys-fg-soft); margin: 0 0 .75rem; padding-left: 1.5rem; line-height: 1.6;
}
.sys-diag-problema__nota { font-size: .75rem; color: var(--sys-fg-muted); font-style: italic; }

/* --- Recomendações --- */
.sys-diag-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sys-diag-rec { border: 1px solid var(--sys-border); padding: .9rem 1rem; background: var(--sys-panel); }
.sys-diag-rec[data-prioridade="alta"] { border-left: 3px solid var(--sys-alert); }
.sys-diag-rec[data-prioridade="media"] { border-left: 3px solid #B26A00; }
.sys-diag-rec[data-prioridade="baixa"] { border-left: 3px solid var(--sys-line-strong); }
.sys-diag-rec[data-prioridade="ok"] { border-left: 3px solid var(--sys-ok); }
.sys-diag-rec__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .45rem;
}
.sys-diag-rec__area {
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sys-fg-muted);
}
.sys-diag-rec__problema { font-size: .9375rem; font-weight: 700; margin: 0 0 .35rem; }
.sys-diag-rec__linha { font-size: .875rem; color: var(--sys-fg-soft); margin: 0 0 .25rem; line-height: 1.55; }

.sys-diag-metodologia { margin-top: 1rem; }
.sys-diag-metodologia > summary {
  cursor: pointer; font-size: .875rem; font-weight: 700; color: var(--sys-link); padding: .35rem 0;
}
.sys-diag-metodologia p { font-size: .875rem; color: var(--sys-fg-soft); margin: .5rem 0; line-height: 1.6; }

.sys-diag-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.sys-diag-troca { margin: 1rem 0; }

/* Área de toque confortável em qualquer botão desta página no celular. */
@media (max-width: 767.98px) {
  .sys-diag-form .sys-btn, .sys-diag-acoes .sys-btn { min-height: 44px; }
  .sys-diag-form__campo { flex: 1 1 100%; }
  .sys-diag-form__linha .sys-btn { flex: 1 1 auto; }
}

/* --- Impressão ---
   O relatório impresso precisa valer sozinho, longe da tela: sai tudo o que
   é navegação e interação, e fica o que alguém leria num PDF anexado a um
   chamado. Os detalhes ficam abertos, porque conteúdo dentro de <details>
   fechado simplesmente não aparece no papel. */
@media print {
  .sys-diag-form, .sys-diag-progresso, .sys-diag-acoes,
  .sys-diag-copy, .sys-diag-troca, .sys-diag-avancado,
  .sys-privacy-note, .sys-ad, .sys-ad-wrap, .sys-doc, .sys-faq,
  .sys-toolindex, .sys-diag-erro { display: none !important; }

  .sys-diag-relatorio { display: block !important; }
  /* A navegação por abas não existe no papel, e nenhuma seção pode ficar
     escondida: o PDF precisa ser o relatório inteiro, não a aba que estava
     aberta na hora de imprimir. O JavaScript também troca para a aba Tudo
     antes de imprimir; esta regra é a garantia de que funciona mesmo se
     aquele gancho falhar. */
  .sys-diag-abas { display: none !important; }
  .sys-diag-secao[hidden] { display: block !important; }

  /* Marca da sysINFO no topo da primeira página do PDF. */
  .sys-diag-marca-print {
    display: block !important;
    border-bottom: 3pt solid #1E7BFF;
    padding-bottom: 10pt;
    margin-bottom: 16pt;
    break-after: avoid;
  }
  .sys-diag-marca-print__nome {
    font-size: 20pt; font-weight: 800; letter-spacing: -.02em;
    color: #0B2E63; margin: 0;
  }
  .sys-diag-marca-print__titulo {
    font-size: 13pt; margin: 8pt 0 4pt; border: 0; padding: 0;
  }
  .sys-diag-marca-print__linha { font-size: 9pt; color: #444; margin: 0; }

  /* Rodapé de crédito, repetido ao fim do documento impresso. */
  .sys-diag-relatorio::after {
    content: "Relatório gerado pelo Diagnóstico Completo de Site da sysINFO, em sysinfo.com.br/diagnostico-de-site/ . Nota técnica indicativa: não representa autoridade de domínio, posição no Google nem garantia de entrega de e-mails. A sysINFO é um jornal brasileiro de tecnologia.";
    display: block;
    margin-top: 18pt;
    padding-top: 10pt;
    border-top: 1pt solid #999;
    font-size: 8.5pt;
    color: #444;
  }
  .sys-diag-secao { break-inside: avoid; border-top: 1px solid #999; }
  .sys-diag-cards { grid-template-columns: repeat(4, 1fr) !important; }
  .sys-diag-card, .sys-diag-bloco, .sys-diag-rec, .sys-diag-metrica {
    break-inside: avoid; border-color: #999 !important;
  }
  .sys-diag-problema[open] > summary { font-weight: 700; }
  .sys-diag-problema:not([open]) .sys-diag-problema__desc { display: block; }
  .sys-diag-tabela { min-width: 0; font-size: 9pt; }
  .sys-diag-tabela-wrap { overflow: visible; }
  .sys-diag-col-acao { display: none; }
}

/* -------------------------------------------------------------------------
   17. Rodapé
   ---------------------------------------------------------------------- */
.sys-footer {
  background: var(--sys-ink-950); color: #C2D2E4;
  border-top: var(--sys-rule) solid var(--sys-cyan);
  padding-block: 2.5rem 1.5rem; margin-top: 3rem;
  font-size: .875rem;
}
.sys-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .sys-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sys-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } }
.sys-footer__title {
  font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sys-cyan-400); margin-bottom: .85rem;
}
.sys-footer ul { list-style: none; margin: 0; padding: 0; }
.sys-footer li { margin-bottom: .5rem; }
.sys-footer a { color: #C2D2E4; text-decoration: none; }
.sys-footer a:hover { color: #fff; text-decoration: underline; }
.sys-footer__about { color: #93A8BF; max-width: 34rem; }

/* Logotipo do rodapé: símbolo + marca escrita, o mesmo conjunto do cabeçalho.
   O símbolo entra como imagem de fundo porque é decorativo - a marca escrita
   ao lado já dá o nome acessível. */
.sys-footer__brand {
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding-left: 52px;
  background-image: url("/ico_sysinfo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 42px 42px;
}
/* O rodapé é escuro, então a marca escrita nele é sempre clara,
   independentemente do tema em que o cabeçalho estiver. */
.sys-footer .sys-brand__word { color: #FFFFFF; font-size: 1.6rem; }
.sys-footer .sys-brand__word b { color: var(--sys-cyan-400); }
.sys-footer__tagline {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8CA3BC;
  font-weight: 700;
  margin: -.35rem 0 .9rem 52px;
}
.sys-footer__bottom {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .75rem; color: #8CA3BC;
}
.sys-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* -------------------------------------------------------------------------
   18. Utilitários
   ---------------------------------------------------------------------- */
.sys-stack { display: grid; }
.sys-stack--xs { gap: .35rem; }
.sys-stack--sm { gap: .6rem; }
.sys-stack--md { gap: 1rem; }
.sys-stack--lg { gap: 1.5rem; }
.sys-stack--xl { gap: 2.25rem; }
.sys-mt-0 { margin-top: 0 !important; }
.sys-text-muted { color: var(--sys-fg-muted) !important; }
.sys-text-soft { color: var(--sys-fg-soft) !important; }
.sys-small { font-size: .8125rem; }
.sys-mono { font-family: var(--sys-font-mono); }
.sys-nowrap { white-space: nowrap; }
.sys-panel { background: var(--sys-panel); border: 1px solid var(--sys-border); border-radius: var(--sys-radius); padding: 1.25rem; }

.sys-empty {
  border: 1px dashed var(--sys-line-strong); border-radius: var(--sys-radius);
  padding: 2rem 1.25rem; text-align: center; color: var(--sys-fg-muted); font-size: .9375rem;
}

/* Erro 404 */
.sys-404 { padding-block: 4rem 5rem; text-align: center; max-width: 42rem; margin-inline: auto; }
.sys-404__code {
  font-size: clamp(4rem, 2rem + 12vw, 8rem); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--sys-line-strong);
}
.sys-404__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-top: .5rem; }
.sys-404__text { color: var(--sys-fg-soft); margin-top: .85rem; }
.sys-404__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.75rem; }

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impressão */
@media print {
  .sys-header, .sys-footer, .sys-ad, .sys-ad-wrap, .sys-newsletter,
  .sys-share, .sys-drawer, .sys-searchbar, .sys-breaking, .sys-aside { display: none !important; }
  body { background: #fff; color: #000; }
  .sys-prose { max-width: none; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}