:root {
  --globo-cyan: #59e2e8;
  --globo-violet: #836dff;
  /* Ciano e dourado só têm contraste sobre fundo escuro. Estas são as
     versões legíveis sobre papel e branco. */
  --globo-teal-ink: #14595e;
  --globo-gold-ink: #8a5e05;
  --globo-red-ink: #b2302a;
  --globo-red-bar: #c03830;
  --globo-blue-ink: #1c5ad6;
  --globo-violet-deep: #5b3fd6;
  --globo-on-navy: #b6c4d1;
}

/* Vermelho, azul, dourado e ciano da casa foram desenhados para fundo escuro.
   Sobre papel e branco eles ficam abaixo do mínimo de contraste, então cada um
   tem aqui a sua versão escura. Conferido com auditoria de pixel, não no olho.
   Cartão, callout, ficha e tabela são sempre claros, mesmo dentro de capítulo
   escuro, e por isso a regra vale para eles em qualquer capítulo. */
.globo-round .stamp.limit,
.globo-round .metric.red-ink,
.globo-round .ledger-row code,
.globo-round .map-row output.down,
.globo-round .media-list .tag.runoff,
.globo-round .chapter:not(.red) code { color: var(--globo-red-ink); }

.globo-round .plan-tags .src,
.globo-round .media-list a,
.globo-round .media-list .tag.first,
.globo-round .case-file a { color: var(--globo-blue-ink); }

.globo-round .chapter.dark .comparison-table th,
.globo-round .chapter.dark .territory-strip span { color: var(--globo-on-navy); }


/* Dourado sobre superfície clara precisa escurecer para ser lido. */
.globo-round .card .metric.gold,
.globo-round .card .stamp.inference,
.globo-round .callout .stamp.inference,
.globo-round .chart-shell .stamp.inference { color: var(--globo-gold-ink); }

.globo-round .hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(89, 226, 232, .30), transparent 30%),
    radial-gradient(circle at 92% 55%, rgba(131, 109, 255, .28), transparent 32%),
    linear-gradient(135deg, #06131f 0%, #102945 54%, #091725 100%);
  border-color: var(--globo-cyan);
}

.globo-round .hero::after {
  content: '140826';
}

.globo-round .eyebrow,
.globo-round .kicker,
.globo-round .sec-no,
.globo-round .hero-stats b,
.globo-round .toc b,
.globo-round footer b {
  color: var(--globo-cyan);
}

.globo-round .hero h1 em { color: var(--globo-cyan); }

/* O numerador de capítulo só fica ciano onde o fundo é escuro. Sobre papel,
   o ciano tem contraste de 1,41 e é ilegível. */
.globo-round .chapter .sec-no { color: var(--globo-teal-ink); }
.globo-round .chapter.dark .sec-no,
.globo-round .chapter.red .sec-no { color: var(--globo-cyan); }
/* Ciano sobre o azul do capítulo dá 3,17. Branco dá 4,95. */
.globo-round .chapter.blue .sec-no { color: #fff; }
.globo-round .toc a:hover,
.globo-round .toc a.active { border-color: var(--globo-cyan); }
.globo-round .case-file { box-shadow: 18px 18px 0 rgba(89, 226, 232, .28); }
.globo-round .case-file::before { background: var(--globo-violet); }

.proofline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 32px 0;
  border: 1px solid var(--line);
  background: var(--line);
}

/* Fundo claro dentro de capítulo escuro: a cor do texto precisa ser explícita,
   senão herda o branco do capítulo e some. */
.proofline article { padding: 24px; color: var(--ink); background: var(--white); }
.proofline b { display: block; color: var(--blue); font: 800 31px/1 var(--mono); }
.proofline span { display: block; margin-top: 9px; color: var(--ink); font-size: .84rem; }

.rank-chart,
.gap-chart,
.channel-chart { display: grid; gap: 10px; }

.rank-row,
.gap-row,
.channel-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(260px, 1fr) 68px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.rank-row > b,
.gap-row > b,
.channel-row > b { font-size: .88rem; }
.rank-row output,
.gap-row output,
.channel-row output { font: 700 13px var(--mono); text-align: right; }

.axis-bar {
  position: relative;
  height: 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #7f8991 50%, transparent calc(50% + .5px)),
    #e8e9e6;
}

.axis-bar span { position: absolute; top: 3px; bottom: 3px; }
.axis-bar .positive { left: 50%; background: var(--blue); }
.axis-bar .negative { right: 50%; background: var(--red); }

.gap-track { position: relative; height: 26px; background: #e7e8e4; }
.gap-track .disapproval { position: absolute; inset: 0 auto 0 0; background: #ffaaa5; }
.gap-track .vote { position: absolute; inset: 5px auto 5px 0; background: var(--blue); }

.channel-track { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.channel-track span { min-width: 0; padding: 5px 8px; color: #fff; font: 700 11px var(--mono); }
.channel-track .social { background: var(--blue); text-align: right; }
.channel-track .tv { background: var(--globo-red-bar); }

.finance-ledger { margin-top: 26px; border-top: 5px solid var(--white); }
.finance-row {
  display: grid;
  grid-template-columns: 170px minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 253, 248, .28);
}
/* O capítulo das notas fiscais é vermelho escuro: cinza e vermelho somem nele. */
.finance-row code { color: #ffd9d5; font: 700 14px var(--mono); }
.finance-row p { margin: 0; color: #f4e3e1; }

.transfer-shell { overflow-x: auto; }
.transfer-shell svg { min-width: 900px; width: 100%; height: auto; }
.transfer-shell text { font-family: var(--mono); fill: var(--ink); }
.transfer-shell .node-label { font-size: 12px; font-weight: 700; }
.transfer-shell .node-value { font-size: 10px; fill: var(--muted); }
.transfer-shell .flow { stroke: rgba(8, 21, 34, .2); stroke-width: .35; }

.legend-hatch {
  display: inline-block;
  width: 42px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 8px;
  border: 1px solid #64717b;
  background: repeating-linear-gradient(135deg, #dce3e5 0 5px, #70818b 5px 7px);
}

.map-chart,
.firmness-chart,
.equation-chart,
.premium-chart { display: grid; gap: 10px; }

.map-row,
.equation-row,
.premium-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(240px, 1fr) 96px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.map-row > b,
.equation-row > b,
.premium-row > b,
.firmness-row > b { font-size: .88rem; }
.map-row output,
.equation-row output,
.premium-row output { font: 700 13px var(--mono); text-align: right; }
.map-row output.up { color: var(--blue); }
.map-row output.down { color: var(--red); }

.map-track { display: flex; height: 26px; overflow: hidden; }
.map-track span {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font: 700 11px var(--mono);
}
.map-track .lula { background: var(--globo-red-bar); }
.map-track .flavio { background: var(--blue); }
.map-track .third { background: var(--globo-violet-deep); }
.map-track .none { color: var(--ink); background: #c9cfd3; }

.map-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font: 11px var(--mono); }
.map-key span { display: flex; align-items: center; gap: 7px; }
.map-key span::before { content: ''; width: 14px; height: 14px; }
.map-key .lula::before { background: var(--red); }
.map-key .flavio::before { background: var(--blue); }
.map-key .third::before { background: var(--globo-violet); }
.map-key .none::before { background: #b7bdc2; }

.firmness-row {
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(200px, 1fr) 62px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.firmness-row small { grid-column: 2 / -1; color: var(--muted); font: 10px var(--mono); }
.firmness-row output { font: 800 15px var(--mono); text-align: right; }
.firmness-bar { height: 20px; background: #e8e9e6; }
.firmness-bar span { display: block; height: 100%; }
.firmness-bar .soft { background: var(--globo-violet); }
.firmness-bar .hard { background: #7f8991; }

.equation-track { display: flex; height: 22px; background: #e8e9e6; }
.equation-track .got { background: var(--blue); }
.equation-track .gap { background: repeating-linear-gradient(135deg, #f0d3d1 0 5px, #d9473f 5px 7px); }

.premium-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  height: 22px;
}
.premium-track span { align-self: stretch; }
.premium-track .down { background: var(--red); justify-self: end; }
.premium-track .up { background: var(--globo-violet); }

.plan-row { grid-template-columns: 92px minmax(180px, .8fr) minmax(0, 1.6fr); }
.plan-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.plan-tags span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 700 10px var(--mono);
  text-transform: uppercase;
}
.plan-tags .src { border-color: var(--blue); color: var(--blue); }

.media-list { margin: 24px 0 0; padding: 0; list-style: none; }
.media-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.media-list b { font: 700 12px var(--mono); text-transform: uppercase; }
.media-list .tag { font: 700 10px var(--mono); text-transform: uppercase; text-align: right; }
.media-list .tag.runoff { color: var(--red); }
.media-list .tag.first { color: var(--blue); }

/* Figura fotográfica. A legenda carrega o número, não o adjetivo. */
.photo { margin: 30px 0 0; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
/* O recorte é por foto, no atributo style de cada imagem, porque `cover`
   centralizado corta o rosto de retrato vertical e sobra o peito. */
.photo img { width: 100%; height: 300px; object-fit: cover; object-position: center; filter: grayscale(.22) contrast(1.04); }
.photo.wide img { height: 400px; }
/* Retrato vertical em caixa larga sempre corta rosto, qualquer que seja o
   ponto de foco. Aqui a foto inteira aparece, sobre um fundo neutro. */
.photo.portrait img { height: 380px; object-fit: contain; background: #e7eaec; }
.photo figcaption {
  padding: 16px 20px;
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.5;
}

.photo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 6px;
}
.photo-row .photo { margin-top: 24px; }

.figure-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.figure-duo .chart-shell,
.figure-duo .photo { margin-top: 30px; }
.figure-duo .photo img { height: 100%; min-height: 230px; }
.figure-duo .photo { display: flex; flex-direction: column; }

#scoreboard-chart svg,
#region-map svg,
#potential-chart svg,
#interest-chart svg,
#concern-chart svg,
#substitution-chart svg,
#economy-chart svg { width: 100%; height: auto; }

#substitution-chart,
#potential-chart,
#concern-chart,
#interest-chart { overflow-x: auto; }
#substitution-chart svg,
#potential-chart svg,
#concern-chart svg,
#interest-chart svg { min-width: 620px; }

.comparison-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.comparison-table th,
.comparison-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.comparison-table th { color: var(--muted); font: 700 11px var(--mono); text-transform: uppercase; }
.comparison-table td:not(:first-child) { font-family: var(--mono); }

.question-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.question-strip article { padding: 24px; color: var(--ink); background: var(--white); border-top: 7px solid var(--blue); }
.question-strip article:last-child { border-color: var(--globo-violet); }
.question-strip b { display: block; font: 800 36px/1 var(--mono); }

.source-path {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 4px;
  color: #aebdca;
  font: 11px/1.5 var(--mono);
}

@media (max-width: 820px) {
  .proofline { grid-template-columns: 1fr 1fr; }
  .rank-row, .gap-row, .channel-row { grid-template-columns: 120px minmax(160px, 1fr) 56px; }
  .map-row, .equation-row, .premium-row { grid-template-columns: 118px minmax(150px, 1fr) 78px; }
  .finance-row, .plan-row { grid-template-columns: 1fr; gap: 5px; }
  .media-list li { grid-template-columns: 1fr; gap: 5px; }
  .media-list .tag { text-align: left; }
  .figure-duo, .photo-row { grid-template-columns: 1fr; }
  .figure-duo .photo img { min-height: 220px; }
}

@media (max-width: 560px) {
  .proofline, .question-strip { grid-template-columns: 1fr; }
  .rank-row, .gap-row, .channel-row { grid-template-columns: 1fr 54px; }
  .map-row, .equation-row, .premium-row { grid-template-columns: 1fr 78px; }
  .firmness-row { grid-template-columns: 1fr 56px; }
  .rank-row .axis-bar, .gap-row .gap-track, .channel-row .channel-track,
  .map-row .map-track, .equation-row .equation-track,
  .premium-row .premium-track, .firmness-row .firmness-bar { grid-column: 1 / -1; grid-row: 2; }
}