/* Contraplano — publicação de demonstração (modo escuro ZEDIA).
   Cores, tipos, espaços e durações vêm só de tokens.css. */

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

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover .manchete, a:hover h3, a:hover h4 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

h1, h2, h3, h4 { font-family: var(--titulo); margin: 0; font-weight: 400; }
p, figure { margin: 0; }

.pular {
  position: absolute; left: var(--e-4); top: -100px;
  background: var(--acao); color: var(--acao-tinta);
  padding: var(--e-2) var(--e-4); border-radius: var(--r-botao); z-index: 10;
}
.pular:focus { top: var(--e-4); }

.contem { max-width: 1200px; margin: 0 auto; padding: 0 var(--e-5); }
@media (min-width: 1024px) { .contem { padding: 0 var(--e-7); max-width: calc(1200px + 2 * var(--e-7)); } }

/* ---------- rótulos e metadados ---------- */

.rotulo {
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--acento-secao, var(--acento));
}

.meta {
  font-size: var(--t-legenda);
  letter-spacing: .02em;
  color: var(--tinta-secundaria);
}

/* Cada seção declara um único acento. */
.acento-vivo   { --acento-secao: var(--iluminador); }
.acento-calor  { --acento-secao: var(--calor-escuro); }
.acento-marca  { --acento-secao: var(--assinatura-clara); }

/* ---------- barra utilitária ---------- */

.utilidade {
  border-bottom: 1px solid var(--fio);
  font-size: var(--t-legenda);
  color: var(--tinta-secundaria);
}
.utilidade .contem {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e-4); min-height: 40px;
}
.utilidade .ao-vivo { color: var(--tinta); display: inline-flex; align-items: center; gap: var(--e-2); }
.utilidade .ao-vivo::before {
  content: ''; width: 8px; height: 8px; border-radius: var(--r-pilula); background: var(--vivo);
}

/* ---------- cabeçalho de jornal ---------- */

.cabecalho { padding: var(--e-6) 0 0; }

.edicao {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--fio);
}
.edicao span:last-child { text-align: right; }

.marca-titulo {
  font-family: var(--titulo);
  font-weight: 200;
  font-size: clamp(3.25rem, 13.5vw, 11.5rem);
  letter-spacing: -.045em;
  line-height: .9;
  text-align: center;
  margin: var(--e-5) 0 var(--e-4);
}
.marca-titulo a { display: inline-block; }
.marca-titulo .ponto { color: var(--iluminador); }

.lema {
  text-align: center;
  font-size: var(--t-corpo-p);
  color: var(--tinta-secundaria);
  margin-bottom: var(--e-5);
}

.secoes {
  border-top: 3px double var(--fio);
  border-bottom: 1px solid var(--fio);
}
.secoes ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--e-6);
}
.secoes a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: var(--t-corpo-p); font-weight: 600; letter-spacing: .02em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--d-estado) ease-out, color var(--d-estado) ease-out;
}
.secoes a:hover, .secoes a[aria-current="page"] { border-bottom-color: var(--iluminador); }

/* ---------- publicidade ---------- */

.publicidade {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
}
.publicidade > .rotulo-pub {
  font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-secundaria);
}
.slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--fio);
  max-width: 100%;
}
.slot iframe { display: block; border: 0; max-width: 100%; }
.slot[data-estado="cheio"] { border-color: transparent; }

.faixa-pub { padding: var(--e-5) 0; border-bottom: 1px solid var(--fio); }

/* ?debug=1 mostra o caminho da ad unit e o estado de cada slot */
.debug .slot::after {
  content: attr(data-rotulo) ' · ' attr(data-estado);
  position: absolute; left: 0; top: 0; z-index: 1;
  font: 600 var(--t-rotulo)/1.3 var(--texto);
  background: var(--acao); color: var(--acao-tinta);
  padding: 2px var(--e-2); white-space: nowrap;
}

/* ---------- arte gerada ---------- */

.arte {
  display: block; width: 100%;
  aspect-ratio: var(--proporcao, 4 / 3);
  background: var(--ilustra);
  overflow: hidden;
}
.arte svg { display: block; width: 100%; height: 100%; }
.arte--cartaz { --proporcao: 2 / 3; }
.arte--larga  { --proporcao: 16 / 9; }

/* ---------- capa ---------- */

.capa { padding: var(--e-7) 0 var(--e-8); }

.grade-capa {
  display: grid; gap: var(--e-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .grade-capa { grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: var(--e-7); }
  .grade-capa > aside { border-left: 1px solid var(--fio); padding-left: var(--e-6); }
}

.destaque .arte { margin-bottom: var(--e-5); }
.destaque .rotulo { margin-bottom: var(--e-3); display: block; }
.manchete {
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  letter-spacing: -.03em;
  line-height: 1.02;
  margin-bottom: var(--e-4);
}
.linha-fina {
  font-size: 1.25rem; line-height: 1.5;
  color: var(--tinta-secundaria);
  max-width: 62ch;
  margin-bottom: var(--e-4);
}

.em-pauta h2 { margin-bottom: var(--e-4); }
.em-pauta ol { list-style: none; margin: 0 0 var(--e-6); padding: 0; }
.em-pauta li { padding: var(--e-4) 0; border-top: 1px solid var(--fio); }
.em-pauta li:first-child { border-top: 0; padding-top: 0; }
.em-pauta h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; margin: var(--e-1) 0; }

/* ---------- títulos de seção ---------- */

.secao { padding: var(--e-8) 0; border-top: 1px solid var(--fio); }
.secao-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  margin-bottom: var(--e-6);
}
.secao-cabeca h2 {
  font-weight: 300; font-size: var(--t-h1); letter-spacing: -.02em; line-height: 1.08;
}
.secao-cabeca h2::after {
  content: ''; display: inline-block; width: .22em; height: .22em; margin-left: .08em;
  background: var(--acento-secao); border-radius: var(--r-pilula);
}

/* ---------- em cartaz (faixa rolável) ---------- */

.cartaz-faixa {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
  gap: var(--e-5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--e-4);
}
.cartaz-faixa article { scroll-snap-align: start; }
.cartaz-faixa h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.25; margin: var(--e-3) 0 var(--e-1); }
.nota-barra { display: flex; gap: 3px; margin-top: var(--e-2); }
.nota-barra i { flex: 1; height: 4px; background: var(--fio); }
.nota-barra i.on { background: var(--acento-secao); }

/* ---------- críticas ---------- */

.grade-3 { display: grid; gap: var(--e-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .grade-3.com-fios > * + * { border-left: 1px solid var(--fio); padding-left: var(--e-6); }
}

.critica .nota {
  font-family: var(--titulo); font-weight: 200;
  font-size: var(--t-display); letter-spacing: -.03em; line-height: 1;
  color: var(--acento-secao);
  font-variant-numeric: tabular-nums;
}
.critica .nota small { font-size: var(--t-h3); color: var(--tinta-secundaria); font-weight: 300; }
.critica h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; margin: var(--e-3) 0 var(--e-2); }
.critica p { color: var(--tinta-secundaria); font-size: var(--t-corpo-p); }

/* ---------- séries + coluna lateral ---------- */

.grade-lateral { display: grid; gap: var(--e-7); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .grade-lateral { grid-template-columns: minmax(0, 1fr) 300px; }
  .grade-lateral > aside { position: relative; }
  .grade-lateral .fixa { position: sticky; top: var(--e-5); }
}

.lista-materias article {
  display: grid; grid-template-columns: 1fr; gap: var(--e-4);
  padding: var(--e-5) 0; border-top: 1px solid var(--fio);
}
.lista-materias article:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 640px) { .lista-materias article { grid-template-columns: 240px 1fr; gap: var(--e-5); } }
.lista-materias h3 { font-size: 1.625rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; margin: var(--e-2) 0; }
.lista-materias p { color: var(--tinta-secundaria); }

.mais-lidas { margin-top: var(--e-7); }
.mais-lidas h2 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--e-4); }
.mais-lidas ol { list-style: none; margin: 0; padding: 0; counter-reset: lidas; }
.mais-lidas li {
  counter-increment: lidas;
  display: grid; grid-template-columns: 48px 1fr; gap: var(--e-3); align-items: start;
  padding: var(--e-3) 0; border-top: 1px solid var(--fio);
  font-size: var(--t-corpo-p); line-height: 1.4;
}
.mais-lidas li::before {
  content: counter(lidas);
  font: 200 2.25rem/1 var(--titulo);
  color: var(--tinta-secundaria);
}

/* ---------- ensaio ---------- */

.ensaio { padding: var(--e-9) 0; border-top: 1px solid var(--fio); }
.ensaio blockquote { margin: 0 auto; max-width: 980px; text-align: center; }
.ensaio blockquote p {
  font-family: var(--titulo); font-weight: 200;
  font-size: clamp(2rem, 4.4vw, 3.75rem); letter-spacing: -.025em; line-height: 1.12;
}
.ensaio footer { margin-top: var(--e-5); }

/* ---------- breves ---------- */

.breve h3 { font-size: 1.375rem; font-weight: 500; line-height: 1.25; margin: var(--e-3) 0 var(--e-2); }
.breve p { color: var(--tinta-secundaria); font-size: var(--t-corpo-p); }
.breve .arte { margin-bottom: var(--e-4); }

/* ---------- rodapé ---------- */

.rodape { border-top: 3px double var(--fio); padding: var(--e-8) 0 var(--e-7); margin-top: var(--e-8); }
.rodape .grade-3 p { color: var(--tinta-secundaria); font-size: var(--t-corpo-p); }
.rodape h2 { font-size: var(--t-h3); font-weight: 300; margin-bottom: var(--e-3); }
.rodape .grade-3 .marca-pe { color: var(--tinta); margin-bottom: var(--e-3); font: 200 var(--t-h1)/1 var(--titulo); letter-spacing: -.03em; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { padding: var(--e-1) 0; }
.rodape li a { color: var(--tinta-secundaria); }
.rodape li a:hover { color: var(--tinta); text-decoration: underline; }
.rodape .assinatura { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--fio); }
.zedia { font-family: var(--titulo); font-weight: 700; letter-spacing: .02em; }

/* ---------- matéria ---------- */

.materia-topo { padding: var(--e-7) 0 var(--e-6); }
.materia-topo .rotulo { display: block; margin-bottom: var(--e-4); }
.materia-topo h1 {
  font-weight: 300; font-size: clamp(2.5rem, 6vw, var(--t-display));
  letter-spacing: -.03em; line-height: 1.02; max-width: 18ch; margin-bottom: var(--e-5);
}
.materia-topo .linha-fina { font-size: 1.375rem; }
.assinatura-materia {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  padding: var(--e-4) 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}
.assinatura-materia strong { font-weight: 600; color: var(--tinta); }

.ficha {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5);
  margin: 0 0 var(--e-6); padding: var(--e-5); background: var(--superficie); border-radius: var(--r-card);
}
@media (min-width: 640px) { .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ficha dt { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--claro-2); }
.ficha dd { margin: var(--e-1) 0 0; font-weight: 600; }

.corpo-texto { max-width: 68ch; }
.corpo-texto p { margin-bottom: var(--e-5); font-size: 1.1875rem; line-height: 1.7; }
.corpo-texto > p:first-of-type::first-letter {
  float: left; font: 200 5.5rem/.8 var(--titulo);
  margin: var(--e-2) var(--e-3) 0 0; color: var(--calor-escuro);
}
.corpo-texto h2 { font-size: var(--t-h2); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; margin: var(--e-7) 0 var(--e-4); }
.corpo-texto blockquote {
  margin: var(--e-7) 0; padding-left: var(--e-5); border-left: 2px solid var(--calor-escuro);
  font: 300 1.75rem/1.3 var(--titulo); letter-spacing: -.01em;
}
.corpo-texto .publicidade { margin: var(--e-7) 0; }

.veredito {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: center;
  margin: var(--e-7) 0; padding: var(--e-5) 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}
.veredito .nota { font: 200 var(--t-display)/1 var(--titulo); letter-spacing: -.03em; color: var(--calor-escuro); }
.veredito p { color: var(--tinta-secundaria); }

/* ---------- celular ---------- */

@media (max-width: 767px) {
  .utilidade .ao-vivo { display: none; }
  .edicao { grid-template-columns: 1fr 1fr; }
  .edicao span:nth-child(2) { display: none; }
  .secoes ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 0 var(--e-5); scrollbar-width: none; }
  .secoes li { flex: none; }
}