/* ==========================================================
   Pixel Culture
   papel, tinta e um laranja-brasa. Nada mais.
   ========================================================== */

:root {
  --papel: #f1eee6;
  --papel-2: #e6e1d4;
  --tinta: #161512;
  --tinta-2: #55504a;
  --tinta-3: #6f695f;   /* 4,7:1 sobre o papel: detalhe miúdo ainda legível */
  --brasa: #e5421d;
  --brasa-botao: #c4380f; /* fundo de botão com texto branco miúdo: 5,4:1 (a brasa pura dá 4,1) */
  --brasa-escura: #b9330f;
  --fio-claro: #cfc8b8;
  --escuro-texto: #b3ab9c;
  --escuro-fio: #34302b;

  --largura: 1240px;
  --gutter: clamp(16px, 3vw, 32px);
  --f-titulo: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Literata", Georgia, serif;
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Seção que ainda não existe: segue no layout, mas não finge ser link (sem href, sem foco, sem hover) */
a:not([href]) { cursor: default; pointer-events: none; }
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; }
::selection { background: var(--brasa); color: #fff; }

:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }

.miolo { max-width: var(--largura); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pular { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--tinta); color: var(--papel); padding: .5rem .8rem; }
.pular:focus { left: 16px; }


/* ---------- peças de texto que se repetem ---------- */

.chapeu {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brasa-escura);
}

/* títulos condensados */
.t { font-weight: 800; font-stretch: 75%; line-height: 1.02; letter-spacing: -.005em; }
.t a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brasa);
  text-decoration-thickness: .07em;
  text-underline-offset: .1em;
}

.linha-fina { margin: 0; font-family: var(--f-texto); font-size: 1.12rem; line-height: 1.4; color: var(--tinta-2); }

.assina { margin: .55rem 0 0; font-size: .76rem; color: var(--tinta-2); }
.assina b { color: var(--tinta); font-weight: 700; }

.btn {
  display: inline-block;
  border: 2px solid var(--tinta);
  background: none;
  color: var(--tinta);
  padding: .5rem .8rem;
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn-cheio { background: var(--brasa-botao); border-color: var(--brasa-botao); color: #fff; }
.btn-cheio:hover { background: var(--tinta); border-color: var(--tinta); }

/* rótulo pequeno com o quadradinho do logo */
.rotulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.rotulo::before { content: ""; width: .55em; height: .9em; background: var(--brasa); }

/* cabeçalho de seção: régua grossa + título condensado */
.cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 3px solid var(--tinta);
  padding-top: .55rem;
  margin-bottom: 1.25rem;
}
.cab h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 1;
  text-transform: uppercase;
}
.cab a {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.cab a::after { content: " →"; }
.cab a:hover { color: var(--brasa-escura); }


/* ---------- nota ---------- */

.nota {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 2.4em;
  padding: .42em .35em .3em;
  font-weight: 900;
  font-stretch: 62%;
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nota small { font-size: .5em; font-weight: 800; }
.n-alta { background: var(--brasa); color: #fff; }
.n-media { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.n-baixa { background: var(--tinta); color: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta-3); }

/* Escala de cor da nota: a temperatura da brasa. Quanto mais quente, melhor.
   As classes t10…t4 são postas pelo site.js a partir do número; n-alta/média/baixa ficam como reserva sem JS. */
.nota.t10 { background: #ffc83d; color: #161512; box-shadow: none; }
.nota.t9  { background: #d53d1a; color: #fff; box-shadow: none; } /* 4,65:1: o decimal pequeno também passa */
.nota.t8  { background: #a8281e; color: #fff; box-shadow: none; }
.nota.t7  { background: #6b2a1e; color: #f1eee6; box-shadow: none; }
.nota.t6  { background: #57463c; color: #eee6d8; box-shadow: none; }
.nota.t5  { background: #3d3b38; color: #c9c1b3; box-shadow: none; }
.nota.t4  { background: #1c1b1a; color: #8a8378; box-shadow: inset 0 0 0 2px #4a4743; }

.nota-canto { position: absolute; z-index: 2; top: 0; right: 0; font-size: 1.55rem; }


/* ---------- capa tipográfica ---------- */
/* Some sozinha quando a imagem em img/ existe: o <img> cobre o texto. */

.capa {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--fundo, #2a2723);
  container-type: inline-size;
}
.capa img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.capa-txt {
  position: absolute;
  left: -.04em;
  bottom: -.12em;
  color: var(--cor, var(--papel));
  font-weight: 900;
  font-stretch: 62%;
  font-size: var(--tam, 42cqw);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--mov-medio, 300ms) ease;
}
@media (hover: hover) and (pointer: fine) {
  a.capa:hover .capa-txt { transform: translateY(-.03em); }
}
.capa-2x3 { aspect-ratio: 2 / 3; }
.capa-21x9 { aspect-ratio: 21 / 9; }


/* ---------- faixa preta do topo ---------- */

.faixa { background: var(--tinta); color: var(--papel); font-size: .76rem; }
.faixa-in { display: flex; align-items: center; gap: 1.5rem; height: 34px; white-space: nowrap; }
.faixa-data { color: var(--escuro-texto); }
.faixa-data::first-letter { text-transform: uppercase; }
.faixa-alta {
  display: flex;
  gap: 1.1rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.faixa-alta::-webkit-scrollbar { display: none; }
.faixa-alta b { color: var(--brasa); text-transform: uppercase; letter-spacing: .08em; }
.faixa-alta a:hover, .faixa-redes a:hover { text-decoration: underline; }
.faixa-redes { display: flex; gap: 1rem; color: var(--escuro-texto); }

@media (max-width: 760px) {
  .faixa-data, .faixa-redes { display: none; }
}


/* ---------- cabeçalho ---------- */

.topo-in { display: flex; align-items: flex-end; gap: 1.5rem; padding-top: 1.4rem; padding-bottom: .9rem; }

/* o nome do logo usa Smooch Sans (escolha do autor, 01/11/2026); títulos e o resto seguem em Archivo */
.logo {
  display: inline-flex;
  align-items: flex-end;
  font-family: "Smooch Sans", var(--f-titulo);
  font-weight: 900;
  font-size: clamp(2.7rem, 6.5vw, 4.7rem);
  line-height: .78;
  letter-spacing: .01em;
  white-space: nowrap; /* "Pixel Culture" tem espaço: o nome nunca quebra em duas linhas */
}
/* O bloco do logo é um SVG: parado, é só o retângulo em brasa. Os desenhos da claquete e do controle
   ficam escondidos e saem para a direita (overflow visível), sem mudar a largura do logo. */
.logo .marca { display: block; flex: none; width: .3em; height: .6em; margin: 0 0 .02em .07em; overflow: visible; }
.marca * { transform-box: fill-box; }
.marca .m-bloco { fill: var(--brasa); transform-origin: 0 100%; }
.marca .m-claquete,
.marca .m-controle { opacity: 0; }
.marca .m-haste { transform-origin: 0 100%; transform: rotate(-28deg); }
.marca .m-haste rect { fill: var(--brasa); }
.marca .furo { fill: var(--papel); }

.lema {
  margin: 0 0 .1rem;
  max-width: 24ch;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: .94rem;
  line-height: 1.25;
  color: var(--tinta-2);
}

.topo-acoes { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.nav { border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block;
  padding: .72rem .85rem .64rem;
  font-weight: 700;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
}
.nav li:first-child a { padding-left: 0; }
.nav a:hover { color: var(--brasa-escura); }
.nav a[aria-current="page"] { border-bottom-color: var(--brasa); }
/* seção que ainda não existe: nome riscado em brasa e "em breve" por cima (dentro do item: o menu rola e cortaria o que vaza) */
.nav a.nav-breve { position: relative; color: var(--tinta-3); text-decoration: line-through 2px var(--brasa); }
.nav-breve-selo {
  position: absolute; top: .1rem; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: .05rem .3rem; background: var(--brasa-botao); color: #fff;
  font-size: .56rem; font-weight: 800; letter-spacing: .08em; line-height: 1.3; white-space: nowrap;
}
.nav-sep { flex: none; width: 1px; height: 1.1rem; margin: 0 .5rem; background: var(--tinta-3); }
.nav-plat a { font-weight: 500; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }

.busca { display: none; background: var(--papel-2); border-bottom: 1px solid var(--tinta); }
.busca.aberta { display: block; }
.busca form { display: flex; gap: .5rem; padding-top: .9rem; padding-bottom: .9rem; }
.busca input {
  flex: 1;
  min-width: 0;
  padding: .55rem .8rem;
  border: 2px solid var(--tinta);
  background: var(--papel);
  font: inherit;
  font-size: 1.05rem;
}

@media (max-width: 760px) {
  .lema, .topo-acoes .btn-cheio { display: none; }
}


/* ---------- abertura da capa ---------- */

.abre {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 0 2.5rem;
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}
.abre-principal > .capa { margin-bottom: 1rem; }
.abre > .destaques { align-self: start; } /* a coluna do lado pode crescer sem esticar o carrossel */
/* contagem do GTA 6: faixa embaixo do carrossel, no espaço que sobrava na coluna principal */
@media (min-width: 761px) {
  .abre > .abre-lado { grid-column: 2; grid-row: 1 / span 2; }
  .abre > .contagem-gta {
    grid-column: 1; grid-template-columns: max-content auto minmax(0, 1fr); grid-template-areas: "chapeu relogio link" "data relogio link";
    align-items: center; justify-items: start; column-gap: 1.5rem; margin: .4rem 0 0; padding: 1.2rem 1.6rem; text-align: left;
  }
  .abre > .contagem-gta .cg-chapeu { grid-area: chapeu; align-self: end; }
  .abre > .contagem-gta .cg-data { grid-area: data; align-self: start; display: block; max-width: none; margin: 0; }
  .abre > .contagem-gta .cg-relogio { grid-area: relogio; width: 15rem; }
  .abre > .contagem-gta .cg-link { grid-area: link; justify-self: end; margin: 0; }
}
.titulo-g { margin: .35rem 0 .7rem; font-size: clamp(2.1rem, 4.4vw, 3.7rem); font-stretch: 68%; font-weight: 850; line-height: .94; }

.abre-lado { border-left: 1px solid var(--tinta); padding-left: 2.5rem; }
/* GTA 6: faixa fina com o céu de Leonida (arte da Rockstar) ao fundo, escurecido o bastante pro texto branco
   (contraste acima de 5:1 até na parte laranja) e esmaecendo de leve em cima e embaixo. Tudo centralizado. */
.contagem-gta {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .2rem;
  margin-bottom: 1.4rem; padding: 1.1rem 1rem 1.15rem; isolation: isolate; text-align: center; color: #fff;
}
.cg-arte { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.cg-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.cg-arte::after { content: ""; position: absolute; inset: 0; background: rgba(26, 8, 38, .5); } /* escurece pra leitura */
.cg-chapeu { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #ffd6ea; }
.cg-relogio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 14rem; }
.cg-relogio > span { display: grid; justify-items: center; }
.cg-relogio > span + span { border-left: 1px solid rgba(255, 255, 255, .3); }
.cg-relogio b { font-size: 2.3rem; font-weight: 900; font-stretch: 62%; line-height: .95; font-variant-numeric: tabular-nums; }
.cg-relogio small { margin-top: .1rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #ffd6ea; }
.cg-data { margin-top: .15rem; font-size: .76rem; font-weight: 700; }
.cg-link { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.cg-link::after { content: " →"; }
.contagem-gta:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .cg-arte img { transition: transform var(--mov-medio) var(--curva); }
  .contagem-gta:hover .cg-arte img { transform: scale(1.04); }
  .cg-link { text-decoration: underline 2px transparent; text-underline-offset: 3px; transition: text-decoration-color var(--mov-rapido) ease; }
  .contagem-gta:hover .cg-link { text-decoration-color: #ffa24c; }
}




.item-lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--fio-claro);
}
.rotulo + .item-lado { border-top: 0; padding-top: 0; }
.item-lado h3 { margin-top: .25rem; font-size: 1.32rem; }
.item-lado .capa { aspect-ratio: 1; align-self: start; }
.item-lado .nota-canto { font-size: 1.05rem; }

@media (max-width: 900px) {
  .abre { grid-template-columns: 1fr; }
  .abre-lado { border-left: 0; padding-left: 0; margin-top: 2.25rem; padding-top: .9rem; border-top: 3px solid var(--tinta); }
}


/* ---------- destaques (carrossel da abertura) ---------- */
/* Capas e textos ficam empilhados na mesma célula; só o .ativo aparece. */

.destaques { --tempo: 8s; position: relative; }

/* pausar o carrossel: único jeito de parar a troca automática no celular (WCAG 2.2.2) */
.destaques-pausa {
  /* área de toque de 44 px; só o ícone branco aparece, com um contorno escuro de 1 px pra não sumir em foto clara */
  position: absolute;
  z-index: 3;
  top: .35rem;
  left: .35rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 0 1px rgba(10, 9, 8, .9)) drop-shadow(0 0 1px rgba(10, 9, 8, .9));
}
.destaques-pausa::before,
.destaques-pausa::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: .75rem;
  background: #f6f2ea;
  transform: translateY(-50%);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.destaques-pausa::before { left: calc(50% - 5px); }
.destaques-pausa::after { left: calc(50% + 2px); }
/* pausado: o ícone vira "tocar" */
.destaques-pausa[aria-pressed="true"]::before {
  left: calc(50% - 4px);
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
  border-width: .42rem 0 .42rem .7rem;
  border-color: transparent transparent transparent #f6f2ea;
}
.destaques-pausa[aria-pressed="true"]::after { display: none; }
.destaques-pausa:hover::before,
.destaques-pausa:hover::after { background-color: var(--brasa); }
.destaques-pausa[aria-pressed="true"]:hover::before { background: none; border-left-color: var(--brasa); }
@media (prefers-reduced-motion: reduce) {
  .destaques-pausa { display: none; } /* sem troca automática, não há o que pausar */
}
.destaques-capas,
.destaques-textos { display: grid; }
.destaques-capas > *,
.destaques-textos > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.destaques-capas > .ativo,
.destaques-textos > .ativo { opacity: 1; visibility: visible; }
/* troca de capa: a nova entra por cima da antiga, e a antiga só some quando a nova já cobriu tudo
   (as duas sumindo juntas abriam um buraco escuro no meio da troca). Só opacidade: desfoque pesa no celular. */
.destaques-capas > * { z-index: 0; transition: opacity 0s linear var(--mov-lento), visibility 0s linear var(--mov-lento); }
.destaques-capas > .ativo { z-index: 1; transition: opacity var(--mov-lento) var(--curva); }
/* texto: o antigo sai rápido, pra não se sobrepor ao novo, que sobe linha a linha (movimento.css) */
.destaques-textos > * { transition: opacity var(--mov-rapido) ease, visibility 0s linear var(--mov-rapido); }
.destaques-textos > .ativo { transition: opacity var(--mov-rapido) ease; }
.destaques .nota-canto { font-size: 2.2rem; }

/* abas: as três manchetes sempre à vista, com a barra de progresso em brasa */
.destaques-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: .9rem 0 1.3rem; }
.destaques-abas button {
  position: relative;
  display: block;
  padding: .7rem 0 0;
  border: 0;
  border-top: 3px solid var(--fio-claro);
  background: none;
  color: var(--tinta-2);
  text-align: left;
  cursor: pointer;
}
.destaques-abas button::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--brasa);
  transform: scaleX(0);
  transform-origin: left;
}
.destaques-abas button:hover,
.destaques-abas [aria-selected="true"] { color: var(--tinta); }
.destaques-abas [aria-selected="true"]::after { animation: encher var(--tempo) linear forwards; }
.destaques.pausado [aria-selected="true"]::after { animation-play-state: paused; }

.aba-num { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.destaques-abas [aria-selected="true"] .aba-num { color: var(--brasa-escura); }
.aba-tit { display: block; margin-top: .2rem; font-weight: 800; font-stretch: 75%; font-size: 1.05rem; line-height: 1.1; }

@keyframes encher { to { transform: scaleX(1); } }

/* reduzir movimento = mais suave, não zero: a troca vira só um fade curto, sem desfoque nem barra correndo */
@media (prefers-reduced-motion: reduce) {
  .destaques-capas > * { transition: opacity 0s linear 200ms, visibility 0s linear 200ms; }
  .destaques-capas > .ativo { transition: opacity 200ms ease; }
  .destaques-abas [aria-selected="true"]::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 560px) {
  .destaques-abas { gap: .6rem; }
  .aba-num { font-size: .6rem; }
  .aba-tit { font-size: .88rem; }
}


/* ---------- últimas + mais lidas ---------- */

.dupla {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}

.fio-lista { margin: 0; padding: 0; list-style: none; }
.fio-lista li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 160px;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--fio-claro);
}
.fio-lista li:first-child { padding-top: 0; }
.fio-lista time { padding-top: .05rem; font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; }
.fio-lista time small { display: block; font-weight: 500; font-size: .74rem; color: var(--tinta-3); }
.fio-lista h3 { margin: .2rem 0 .35rem; font-size: 1.38rem; }
.fio-lista p:not(.chapeu) { margin: 0; font-family: var(--f-texto); font-size: .97rem; line-height: 1.4; color: var(--tinta-2); }
.fio-lista .capa { aspect-ratio: 4 / 3; align-self: start; }

.lidas-in { position: sticky; top: 1rem; }
.lidas ol { margin: 0; padding: 0; list-style: none; counter-reset: lida; }
.lidas li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .5rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--fio-claro);
  counter-increment: lida;
}
.lidas li:first-child { padding-top: 0; }
.lidas li::before {
  content: counter(lida);
  font-weight: 900;
  font-stretch: 62%;
  font-size: 2.6rem;
  line-height: .8;
  color: var(--brasa);
}
.lidas a { font-weight: 700; font-stretch: 85%; font-size: 1.04rem; line-height: 1.18; }
.lidas a:hover { text-decoration: underline; text-decoration-color: var(--brasa); }

.publi {
  display: grid;
  place-items: center;
  aspect-ratio: 300 / 250;
  margin-top: 2rem;
  border: 1px dashed var(--tinta-3);
  color: var(--tinta-3);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}

@media (max-width: 900px) {
  .dupla { grid-template-columns: 1fr; }
  .publi { display: none; }
}
@media (max-width: 640px) {
  .fio-lista li { grid-template-columns: 3.3rem minmax(0, 1fr); gap: .8rem; }
  .fio-lista .capa { display: none; }
  .fio-lista h3 { font-size: 1.22rem; }
}


/* ---------- placar ---------- */

.placar { background: var(--tinta); color: var(--papel); padding: 2.6rem 0 3rem; }
.placar .cab { border-color: var(--papel); }
.placar .cab a:hover { color: var(--brasa); }
.placar-intro { max-width: 52ch; margin: -.4rem 0 1.6rem; font-family: var(--f-texto); font-style: italic; color: var(--escuro-texto); }

.placar-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.placar-lista li { border-top: 1px solid var(--escuro-fio); }
.placar-linha { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1rem 0; }
.placar-linha .nota { width: 100%; min-width: 0; }
.placar .chapeu { color: var(--brasa); }
.placar-info strong { display: block; margin: .15rem 0 .2rem; font-size: 1.32rem; font-weight: 800; font-stretch: 75%; line-height: 1.05; }
.placar-info em { display: block; font-family: var(--f-texto); font-size: .92rem; line-height: 1.35; color: var(--escuro-texto); }
.placar-linha:hover strong { text-decoration: underline; text-decoration-color: var(--brasa); text-underline-offset: .1em; }
.selo { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--escuro-texto); }

@media (max-width: 860px) {
  .placar-lista { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .placar-linha { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .placar-linha .nota { font-size: 2.1rem; }
  .selo { display: none; }
}


/* ---------- na tela ---------- */

.tela { padding-top: 3rem; padding-bottom: 3rem; }
.cartazes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cartaz h3 { margin-top: .65rem; font-size: 1.1rem; }
.cartaz p { margin: .2rem 0 0; font-size: .78rem; color: var(--tinta-2); }

@media (max-width: 1000px) {
  .cartazes {
    grid-template-columns: repeat(6, 170px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }
  .cartaz { scroll-snap-align: start; }
}


/* ---------- colunas ---------- */

.opiniao { padding-bottom: 3rem; }
.colunas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--tinta); }
.coluna { padding: 1.2rem 1.6rem 1.4rem; border-left: 1px solid var(--fio-claro); }
.coluna:first-child { padding-left: 0; border-left: 0; }
.coluna:last-child { padding-right: 0; }
.coluna-nome { margin: 0; font-weight: 900; font-stretch: 62%; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.coluna-quem { margin: .25rem 0 0; font-size: .76rem; color: var(--tinta-2); }
.coluna blockquote { margin: 1.1rem 0; font-family: var(--f-texto); font-style: italic; font-size: 1.18rem; line-height: 1.38; }
.coluna h3 { font-size: 1.08rem; }

@media (max-width: 860px) {
  .colunas { grid-template-columns: 1fr; }
  .coluna, .coluna:first-child { padding: 1.2rem 0; border-left: 0; border-top: 1px solid var(--fio-claro); }
  .coluna:first-child { border-top: 0; }
}


/* ---------- podcast ---------- */

.pod {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 1.75rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--papel-2);
  border-top: 3px solid var(--tinta);
}
.pod-capa {
  display: grid;
  place-items: end start;
  aspect-ratio: 1;
  padding: .6rem;
  background: var(--brasa);
  color: var(--tinta);
  font-weight: 900;
  font-stretch: 62%;
  font-size: 3rem;
  line-height: .8;
}
.pod-titulo { margin: .3rem 0 .4rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.pod-quem { margin: 0; font-family: var(--f-texto); color: var(--tinta-2); }
.pod-player { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; }
.pod-play {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  background: var(--tinta);
  cursor: pointer;
}
.pod-play::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .45rem 0 .45rem .75rem;
  border-color: transparent transparent transparent var(--papel);
}
.pod-play:hover { background: var(--brasa); }
.pod-barra { flex: 1; height: 4px; background: var(--fio-claro); }
.pod-barra span { display: block; height: 100%; background: var(--brasa); }
.pod-tempo { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pod-onde { margin: 0; padding: 0; list-style: none; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pod-onde li + li { margin-top: .5rem; }
.pod-onde a:hover { color: var(--brasa-escura); }

@media (max-width: 860px) {
  .pod { grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; }
  .pod-capa { font-size: 2rem; }
  .pod-onde { grid-column: 1 / -1; display: flex; gap: 1.25rem; }
  .pod-onde li + li { margin-top: 0; }
}
@media (max-width: 520px) {
  .pod { grid-template-columns: 1fr; }
  .pod-capa { width: 80px; }
}


/* ---------- newsletter ---------- */

#newsletter { padding-top: 3rem; }
.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.75rem;
  border: 3px solid var(--tinta);
}
.news-titulo { font-weight: 900; font-stretch: 62%; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: .9; text-transform: uppercase; }
.news-texto { margin: .5rem 0 0; font-family: var(--f-texto); font-size: 1.05rem; color: var(--tinta-2); }
.news-form { display: flex; gap: .5rem; }
.news-form input {
  flex: 1;
  min-width: 0;
  padding: .7rem .8rem;
  border: 2px solid var(--tinta);
  background: var(--papel);
  font: inherit;
}
.news-form .btn { padding: .7rem 1rem; }
.news-ok { margin: 0; font-weight: 700; font-size: 1.1rem; }

@media (max-width: 760px) {
  .news { grid-template-columns: 1fr; padding: 1.25rem; }
  .news-form { flex-direction: column; }
}


/* ---------- rodapé em forma de créditos ---------- */

.rodape { margin-top: 4.5rem; padding-top: 5rem; background: #0d0c0b; color: var(--papel); }

.creditos { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.creditos-marca { margin: 0; font-family: "Smooch Sans", var(--f-titulo); font-weight: 900; font-size: 2.85rem; line-height: 1; letter-spacing: .01em; }
.creditos-sub { margin: .4rem 0 3rem; font-family: var(--f-texto); font-style: italic; color: var(--escuro-texto); }
.creditos dl { margin: 0; }
.creditos dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: .45rem 0; }
.creditos dt {
  padding-top: .3rem;
  text-align: right;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--escuro-texto);
}
.creditos dd { margin: 0; text-align: left; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }

.rodape-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--escuro-fio);
}
.rodape-tit { margin: 0 0 .7rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brasa); }
.rodape-links ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.rodape-links li + li { margin-top: .4rem; }
.rodape-links a { color: #d8d2c5; }
.rodape-links a:hover { color: #fff; text-decoration: underline; }
/* botão no meio do texto que parece link (abre a caixa de contato) */
.texto .botao-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--brasa); text-underline-offset: .15em; }
/* botão que parece link (abre a caixa de contato) */
.rodape-botao { padding: 0; border: 0; background: none; color: #d8d2c5; font: inherit; text-align: left; cursor: pointer; }
.rodape-botao:hover { color: #fff; text-decoration: underline; }
.copy { margin: 0 auto; padding-top: 1.2rem; padding-bottom: 1.2rem; border-top: 1px solid var(--escuro-fio); font-size: .76rem; color: var(--tinta-3); }

.cena-pos { padding: 12rem var(--gutter) 5rem; text-align: center; }
.cena-aviso { margin: 0 0 10rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .3em; color: #857e72; }
.cena-rotulo { margin: 0 0 .6rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--brasa); }
.cena-texto { max-width: 34ch; margin: 0 auto; font-family: var(--f-texto); font-style: italic; font-size: 1.15rem; color: #d8d2c5; }

@media (max-width: 760px) {
  .rodape-links { grid-template-columns: 1fr 1fr; }
  .creditos dl div { gap: 1rem; }
}


/* ==========================================================
   Páginas de texto (review e notícia)
   ========================================================== */

.migalha { margin: 0; padding-top: 1.5rem; font-size: .76rem; color: var(--tinta-2); }
.migalha a { text-decoration: underline; text-decoration-color: var(--fio-claro); text-underline-offset: .15em; }
.migalha a:hover { color: var(--brasa-escura); }

.artigo-topo { max-width: 940px; padding-top: 1.25rem; }
.artigo-titulo { margin: .45rem 0 1rem; font-size: clamp(2.4rem, 6.2vw, 4.9rem); font-stretch: 64%; font-weight: 850; line-height: .92; }
.artigo-titulo span { color: var(--brasa); }
.artigo-topo .linha-fina { max-width: 46ch; font-size: clamp(1.1rem, 1.6vw, 1.32rem); }

.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1.2rem;
  margin-top: 1.5rem;
  padding: .65rem 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  font-size: .78rem;
  color: var(--tinta-2);
}
.artigo-meta b { color: var(--tinta); }
.artigo-meta .compartilha { display: flex; gap: .9rem; margin-left: auto; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta); }
.compartilha button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.compartilha button:hover { color: var(--brasa-escura); }

.artigo-capa { margin-top: 2rem; margin-bottom: 2.5rem; }
.artigo-capa figcaption { margin-top: .5rem; font-size: .74rem; color: var(--tinta-3); }

.artigo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 4rem;
  align-items: start;
}

.texto { max-width: 68ch; font-family: var(--f-texto); font-size: 1.14rem; line-height: 1.7; }
.texto p { margin: 0 0 1.15em; }
.texto > p:first-of-type::first-letter {
  float: left;
  margin: .07em .09em 0 0;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-stretch: 62%;
  font-size: 4.7em;
  line-height: .78;
  color: var(--brasa);
}
.texto h2 { margin: 2.1em 0 .55em; font-family: var(--f-titulo); font-weight: 850; font-stretch: 72%; font-size: 1.9rem; line-height: 1; }
.texto a { text-decoration: underline; text-decoration-color: var(--brasa); text-underline-offset: .12em; }
.texto ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.texto li { margin-bottom: .45em; }
.texto li::marker { color: var(--brasa); }

.texto blockquote {
  margin: 2.2rem 0;
  padding: 1rem 0 1.1rem;
  border-top: 3px solid var(--brasa);
  border-bottom: 1px solid var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.04;
}

.nota-redacao {
  margin: 2rem 0;
  padding: .9rem 1rem;
  background: var(--papel-2);
  border-left: 4px solid var(--tinta);
  font-family: var(--f-titulo);
  font-size: .88rem;
  line-height: 1.5;
}

/* imagens dentro da matéria: sempre com legenda e crédito */
.texto h2 { clear: both; }

.figura { margin: 2.2rem 0; }
.figura img { display: block; width: 100%; height: auto; background: var(--papel-2); }
.figura figcaption,
.comparativo figcaption { margin-top: .55rem; font-family: var(--f-titulo); font-size: .78rem; line-height: 1.45; color: var(--tinta-2); }
.credito { display: block; margin-top: .15rem; font-size: .7rem; color: var(--tinta-3); }

/* post de rede social citado na matéria: o iframe é do próprio Instagram (fundo branco dele) */
.figura-post iframe { display: block; width: 100%; max-width: 540px; height: 780px; border: 1px solid var(--fio-claro); background: #fff; }
.escuro .figura-post iframe { border-color: var(--regua); }

/* trailer oficial: só toca se a pessoa clicar */
.figura-video .video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.figura-video iframe,
.video-capa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-capa { display: block; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.video-capa:hover img { opacity: 1; }
.video-play {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem .55rem .75rem;
  background: var(--brasa-botao);
  color: #fff;
  font-family: var(--f-titulo);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.video-play::before { content: ""; border-style: solid; border-width: .4rem 0 .4rem .65rem; border-color: transparent transparent transparent #fff; }
.video-capa:hover .video-play { background: var(--tinta); color: var(--papel); }
.video-capa:hover .video-play::before { border-left-color: var(--papel); }

/* foto vertical ao lado do texto, como em revista */
.figura-lado { float: right; width: 44%; margin: .35rem 0 1.2rem 1.8rem; }

/* comparativo lado a lado: jogo x filme, mesmo enquadramento */
.comparativo { margin: 2.4rem 0; }
.comparativo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.comparativo-lado { position: relative; margin: 0; }
.comparativo-lado img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papel-2); }
.comparativo-rotulo {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .35rem .65rem;
  background: #0d0c0b;
  color: #f1eee6;
  font-family: var(--f-titulo);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.comparativo-lado + .comparativo-lado .comparativo-rotulo { background: var(--brasa); color: #fff; }

@media (max-width: 760px) {
  .figura-lado { float: none; width: 100%; margin: 2rem 0; }
}

/* prós e contras */
.balanco { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2.5rem 0; font-family: var(--f-titulo); }
.balanco h3 { padding-bottom: .4rem; border-bottom: 3px solid var(--tinta); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.balanco ul { margin: 0; padding: 0; list-style: none; font-size: .98rem; line-height: 1.35; }
.balanco li { display: grid; grid-template-columns: 1.2rem 1fr; padding: .55rem 0; border-bottom: 1px solid var(--fio-claro); }
.balanco .fica li::before { content: "+"; font-weight: 900; color: var(--brasa-escura); }
.balanco .pesa li::before { content: "–"; font-weight: 900; color: var(--tinta-3); }

/* veredito no fim do texto */
.veredito {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--f-titulo);
}
.veredito .nota { font-size: 4rem; }
.veredito p { margin: 0; font-family: var(--f-texto); font-size: 1.08rem; line-height: 1.45; color: #ddd7cb; }
.veredito strong { display: block; margin-bottom: .35rem; font-family: var(--f-titulo); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--brasa); }

/* ficha lateral, com pontilhado de crédito de filme */
.ficha { position: sticky; top: 1.25rem; border-top: 3px solid var(--tinta); }
.ficha-nota { display: flex; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--tinta); }
.ficha-nota .nota { font-size: 4.4rem; }
.ficha-nota p { margin: 0; font-size: .78rem; color: var(--tinta-2); }
.ficha-nota b { display: block; font-weight: 900; font-stretch: 62%; font-size: 1.9rem; line-height: 1; text-transform: uppercase; color: var(--tinta); }
.ficha h2 { margin: 1.3rem 0 .4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.ficha dl { margin: 0; }
.ficha dl div { display: flex; align-items: baseline; gap: .4rem; padding: .28rem 0; font-size: .84rem; }
.ficha dt { flex: none; color: var(--tinta-2); }
.ficha dl div::after { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--tinta-3); }
.ficha dd { order: 2; max-width: 62%; margin: 0; text-align: right; font-weight: 700; }
.ficha-obs { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--fio-claro); font-family: var(--f-texto); font-style: italic; font-size: .88rem; color: var(--tinta-2); }

/* linha do tempo (notícia) */
.linha-tempo { margin: 0; padding: 0; list-style: none; }
.linha-tempo li { position: relative; padding: 0 0 1rem 1.2rem; border-left: 2px solid var(--tinta); font-size: .86rem; line-height: 1.35; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: .2rem; width: 10px; height: 10px; background: var(--papel); border: 2px solid var(--tinta); }
.linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo li:last-child::before { background: var(--brasa); border-color: var(--brasa); }
.linha-tempo time { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; font-family: var(--f-titulo); }
.tags a { display: block; padding: .3rem .6rem; border: 1px solid var(--tinta); font-size: .76rem; font-weight: 600; }
.tags a:hover { background: var(--tinta); color: var(--papel); }

.leia { padding-top: 3.5rem; }
.leia-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.leia-grade .capa { margin-bottom: .75rem; }
.leia-grade h3 { margin-top: .2rem; font-size: 1.25rem; }

@media (max-width: 960px) {
  .artigo-grade { grid-template-columns: 1fr; gap: 0; }
  .ficha { position: static; order: -1; margin-bottom: 2rem; }
}
@media (max-width: 760px) {
  .artigo-meta .compartilha { margin-left: 0; width: 100%; }
  .balanco { grid-template-columns: 1fr; }
  .veredito { grid-template-columns: 1fr; }
  .veredito .nota { justify-self: start; }
  .leia-grade { grid-template-columns: 1fr; }
  .texto { font-size: 1.08rem; }
}


/* ==========================================================
   Arquivo de reviews
   ========================================================== */

.pag-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: end;
  padding-top: 2.25rem;
  padding-bottom: 1.75rem;
}
.pag-titulo { font-size: clamp(4rem, 13vw, 9.5rem); font-weight: 900; font-stretch: 62%; line-height: .78; letter-spacing: -.025em; text-transform: uppercase; }
.pag-desc { max-width: 40ch; margin: 1rem 0 0; font-family: var(--f-texto); font-size: 1.1rem; color: var(--tinta-2); }
/* página 404 */
.erro { padding-bottom: 5rem; }
.erro-saidas { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }

.escala { border-top: 3px solid var(--tinta); }
.escala h2 { margin: .6rem 0 .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.escala dl { margin: 0; }
.escala div { display: grid; grid-template-columns: 4.4rem 6.2rem 1fr; gap: .6rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--fio-claro); font-size: .8rem; }
.escala dt { font-weight: 900; font-stretch: 62%; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.escala dd { margin: 0; color: var(--tinta-2); }

/* amostra da cor de cada faixa, na mesma ordem da lista (10 até fraco) */
.escala dt::before {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-right: .4em;
  vertical-align: .02em;
  background: var(--amostra);
}
.escala div:nth-child(1) { --amostra: #ffc83d; }
.escala div:nth-child(2) { --amostra: #d53d1a; }
.escala div:nth-child(3) { --amostra: #a8281e; }
.escala div:nth-child(4) { --amostra: #6b2a1e; }
.escala div:nth-child(5) { --amostra: #57463c; }
.escala div:nth-child(6) { --amostra: #3d3b38; }
.escala div:nth-child(7) { --amostra: #1c1b1a; }
.escala div:nth-child(7) dt::before { box-shadow: inset 0 0 0 1px #6a665f; }
.escala dd:first-of-type { font-weight: 700; color: var(--tinta); }

.filtros {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
  background: var(--papel);
  border-top: 3px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}
.abas { display: flex; gap: 0; }
.abas button {
  padding: .45rem .8rem;
  border: 2px solid var(--tinta);
  background: none;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}
.abas button + button { border-left: 0; }
.abas button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.abas button:hover:not([aria-pressed="true"]) { background: var(--papel-2); }

.filtro { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.filtro select {
  padding: .4rem 1.8rem .4rem .6rem;
  border: 2px solid var(--tinta);
  border-radius: 0;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23161512'/%3E%3C/svg%3E") no-repeat right .6rem center;
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  appearance: none;
  cursor: pointer;
}
.contador { margin-left: auto; font-size: .78rem; color: var(--tinta-2); }

.grade-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2.25rem 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.card-r-capa { display: block; position: relative; margin-bottom: .8rem; }
/* cards fora da tela só são montados quando chegam perto dela: o arquivo tem 20+ cards com capas que
   dependem da largura do contêiner, e montar todos de uma vez (e de novo quando a fonte chega) travava o toque */
.card-r { content-visibility: auto; contain-intrinsic-size: auto 26rem; }
.card-r h3 { margin: .25rem 0 .4rem; font-size: 1.32rem; }
.card-r-frase { margin: 0; font-family: var(--f-texto); font-size: .96rem; line-height: 1.4; color: var(--tinta-2); }
.vazio { grid-column: 1 / -1; padding: 3rem 0; font-family: var(--f-texto); font-style: italic; font-size: 1.2rem; color: var(--tinta-2); }

@media (max-width: 900px) {
  .pag-topo { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .contador { margin-left: 0; width: 100%; }
  .abas { width: 100%; }
  .abas button { flex: 1; padding-left: .3rem; padding-right: .3rem; }
}

/* Toque no celular: links e botões miúdos ganham área de toque (mín. 24 px; botões, 44 px).
   Padding em elemento em linha aumenta a área sem empurrar a linha. */
@media (pointer: coarse) {
  .faixa-alta a, .faixa-redes a, .migalha a, .cab a, .ficha-nota a { padding-block: .6rem; }
  .rodape-links li a[href], .rodape-botao { display: inline-block; padding-block: .35rem; }
  .compartilha button { min-height: 2.75rem; }
  .pod-play { width: 2.75rem; height: 2.75rem; }
}

/* Alavanca da luz da sala: braço tombado à esquerda = sala escura; à direita, cabo em brasa = luzes acesas */
/* contorno, cor e hover vêm do .btn; aqui só o encaixe da alavanca ao lado do rótulo */
.btn-luz { display: inline-flex; align-items: center; gap: .45rem; padding-block: .2rem; transition: transform 160ms ease; }
.btn-luz:active { transform: scale(.97); }
.alavanca { width: 1.6rem; height: 1.6rem; flex: none; }
.alv-base { fill: none; stroke: currentColor; stroke-width: 2; }
.alv-haste, .alv-eixo { fill: currentColor; }
.alv-cabo { fill: currentColor; transition: fill 220ms ease; }
.alv-braco { transform-origin: 15px 24px; transform: rotate(-35deg); transition: transform 220ms cubic-bezier(.77, 0, .175, 1); }
.btn-luz[data-ligado] .alv-braco { transform: rotate(35deg); }
.btn-luz[data-ligado] .alv-cabo { fill: var(--brasa); }
@media (max-width: 760px) {
  .dj-rotulo { display: none; }
}

/* ---------- especial (página de referência: gta-6.html) ---------- */
.esp-contagem { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .9rem 0; border-block: 1px solid var(--fio-claro); font-family: var(--f-titulo); font-size: .9rem; color: var(--tinta-2); }
.esp-contagem b { font-size: 3.4rem; font-weight: 900; font-stretch: 62%; line-height: .9; color: var(--brasa-escura); }
.esp-contagem [data-dias-rotulo] { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); }
.texto .esp-resumo { padding: 1rem 1.1rem; border-left: 4px solid var(--brasa); background: var(--papel-2); }
.esp-secao { margin-top: 3.2rem; }
.esp-cab .chapeu { display: flex; align-items: baseline; gap: .6rem; margin: 0; }
.esp-num { font-family: var(--f-titulo); font-weight: 900; font-stretch: 62%; font-size: 1.6rem; line-height: 1; color: var(--brasa-escura); }
.texto .esp-cab h2 { margin-top: .3em; }
/* origem da informação: confirmado (cheio), imprensa (vazado), em aberto (tracejado) */
.texto .origem { display: inline-flex; align-items: center; gap: .5rem; margin: 1.6em 0 .4em; font-family: var(--f-titulo); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta); }
.origem::before { content: ""; width: .7rem; height: .7rem; border: 2px solid var(--brasa); }
.origem-confirmado::before { background: var(--brasa); }
.origem-aberto::before, .origem-rumor::before { border-style: dashed; border-color: var(--tinta-3); }
.texto .fontes-secao { margin-top: 1.4em; font-family: var(--f-titulo); font-size: .78rem; line-height: 1.6; color: var(--tinta-3); }
.fontes-secao b { margin-right: .4rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); }
.fontes-secao a { text-decoration: underline; text-underline-offset: .15em; }
.texto blockquote footer { margin-top: .6rem; font-family: var(--f-titulo); font-size: .74rem; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.esp-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; margin: 1.8rem 0; padding-bottom: 1.6rem; border-bottom: 1px solid var(--fio-claro); }
.esp-ficha img, .esp-mini img, .esp-regioes img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--papel-2); }
.texto .esp-ficha h3 { margin: .15em 0 .3em; }
.texto .esp-ficha p { font-size: 1rem; }
.texto .esp-ficha .chapeu, .texto .esp-mini .chapeu, .texto .esp-regioes .chapeu { margin: 0; font-size: .68rem; }
.texto .esp-frase { font-style: italic; font-size: 1.08rem; color: var(--tinta); }
.esp-mais { margin: 1.6rem 0; border: 2px solid var(--fio-claro); }
.esp-mais summary { padding: .85rem 1rem; font-family: var(--f-titulo); font-weight: 800; cursor: pointer; }
.esp-mais[open] summary { border-bottom: 1px solid var(--fio-claro); }
.esp-mini-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esp-mini { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--fio-claro); }
.esp-mini img { aspect-ratio: 1; }
.texto .esp-mini h4 { margin: 0 0 .2rem; font-family: var(--f-titulo); font-size: 1rem; }
.texto .esp-mini p { margin: .2rem 0 0; font-size: .92rem; line-height: 1.5; }
.texto .esp-regioes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; margin: 1.6rem 0; padding: 0; list-style: none; }
.texto .esp-regioes li { margin: 0; }
.texto .esp-regioes h3 { margin: .6rem 0 .25rem; font-size: 1.25rem; }
.texto .esp-regioes p { font-size: .96rem; line-height: 1.55; }
.tabela { overflow-x: auto; margin: 1.6rem 0; }
.tabela table { width: 100%; border-collapse: collapse; font-family: var(--f-titulo); font-size: .88rem; }
.tabela caption { padding-bottom: .5rem; text-align: left; font-weight: 800; }
.tabela th, .tabela td { padding: .6rem .7rem .6rem 0; border-bottom: 1px solid var(--fio-claro); text-align: left; vertical-align: top; }
.tabela th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.esp-lado h2 { margin: 1rem 0 .6rem; font-family: var(--f-titulo); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.esp-indice { margin: 0 0 1.4rem; padding: 0; list-style: none; font-family: var(--f-titulo); font-size: .9rem; }
.esp-indice li { border-bottom: 1px solid var(--fio-claro); }
.esp-indice a { display: flex; gap: .6rem; padding: .45rem 0; }
.esp-indice a:hover { color: var(--brasa-escura); }
.esp-indice .esp-num { font-size: 1rem; min-width: 1.4rem; }
.esp-numeros { margin: 0; }
.esp-numeros div { display: grid; grid-template-columns: 4.2rem 1fr; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--fio-claro); }
.esp-numeros dt { font-family: var(--f-titulo); font-size: 2rem; font-weight: 900; font-stretch: 62%; color: var(--brasa-escura); }
.esp-numeros dd { margin: 0; font-family: var(--f-titulo); font-size: .85rem; }
.esp-numeros small { display: block; color: var(--tinta-3); font-size: .72rem; }
@media (max-width: 760px) {
  .esp-ficha, .esp-mini-grade, .texto .esp-regioes { grid-template-columns: 1fr; }
}

/* Carrossel: no computador o texto do destaque fica sobre a foto. Uma camada escura só embaixo e à
   esquerda (onde está o texto) garante a leitura; o resto da arte fica com a cor original.
   No celular o texto continua embaixo da capa, sem camada. */
@media (min-width: 761px) {
  .destaques { display: grid; grid-template-areas: "capa" "abas"; }
  .destaques-capas { grid-area: capa; position: relative; }
  .destaques-capas::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(to top, rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .62) 32%, rgba(10, 9, 8, 0) 68%),
      linear-gradient(to right, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, 0) 58%);
  }
  .destaques-capas .nota-canto { z-index: 2; }
  .destaques-abas { grid-area: abas; }
  .destaques-textos { grid-area: capa; align-self: end; z-index: 2; max-width: min(34rem, 58%); padding: 0 0 1.5rem 1.6rem; pointer-events: none; }
  /* os três textos dividem a mesma célula: cada um encosta na base, seja qual for o tamanho */
  .destaques-textos > * { align-self: end; }
  .destaques-textos > .ativo { pointer-events: auto; }
  .destaques-textos .chapeu { display: inline-block; margin: 0 0 .55rem; padding: .3rem .5rem; background: var(--brasa-botao); color: #fff; }
  .destaques .destaques-textos .titulo-g { margin: 0 0 .55rem; font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1; text-wrap: balance; }
  .destaques .destaques-textos .titulo-g a { color: #f6f2ea; }
  .destaques .destaques-textos .linha-fina { max-width: 32rem; margin: 0 0 .6rem; font-size: .98rem; line-height: 1.45; color: #ddd6ca; }
  .destaques .destaques-textos .assina { margin: 0; color: #b9b1a3; }
  .destaques .destaques-textos .assina b { color: #f6f2ea; }
}

/* ---------- contas de leitor (entrar.html, perfil.html) ---------- */
.conta { padding-bottom: 5rem; }
.conta-caixa { max-width: 26rem; }
.conta-form { display: grid; gap: .35rem; max-width: 34rem; }
.conta-form label, .conta-form legend { margin-top: .7rem; font-family: var(--f-titulo); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.conta-form input:not([type="checkbox"]):not([type="radio"]), .conta-form textarea {
  padding: .7rem .8rem; border: 2px solid var(--fio-claro); background: var(--papel); color: var(--tinta); font: inherit; font-family: var(--f-texto);
}
.conta-form fieldset { display: grid; gap: .35rem; margin: .6rem 0 0; padding: 0; border: 0; }
.conta-form button { justify-self: start; margin-top: 1rem; }
.conta-dica, .conta-nota { margin: 0; font-family: var(--f-titulo); font-size: .78rem; color: var(--tinta-3); }
.conta-nota { margin-top: 1.4rem; line-height: 1.5; }
.conta-nota a { text-decoration: underline; }
.conta-status { min-height: 1.4em; margin: 1rem 0; font-family: var(--f-titulo); font-weight: 700; }
.conta-google { width: 100%; text-align: center; }
.conta-ou { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 .2rem; font-family: var(--f-titulo); font-size: .78rem; color: var(--tinta-3); }
.conta-ou::before, .conta-ou::after { content: ""; flex: 1; border-top: 1px solid var(--fio-claro); }
.conta-check { display: flex; align-items: center; gap: .5rem; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: .95rem !important; }
.conta-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brasa-botao); }
.conta-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--fio-claro); }
.conta-perigo { margin-left: auto; }
.conta-perigo:hover { background: #a3261a; border-color: #a3261a; color: #fff; }
/* Perfil: ficha técnica do leitor (foto, nome, nível), números em pontilhado de créditos,
   conquistas como carimbos. Um foco por bloco; edição recolhida. */
.conta-perfil { padding-top: 1.5rem; }
.ficha-leitor { display: grid; grid-template-columns: 176px minmax(0, 1fr) 15rem; gap: 2rem; align-items: start; padding: 1.5rem 0 2rem; border-bottom: 3px solid var(--tinta); }
/* foto, nome e nível começam na mesma linha (o topo da foto encosta no chapéu) */
.fl-nivel { margin-top: 1.4rem; }
.fl-foto { position: relative; width: 176px; height: 176px; background: var(--brasa); }
.fl-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-inicial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-titulo); font-size: 6rem; font-weight: 900; font-stretch: 62%; line-height: 1; color: #fff; }
.fl-foto img:not([hidden]) + .fl-inicial { display: none; }
.fl-corpo .chapeu { margin: 0 0 .4rem; }
.fl-nome { margin: 0; font-family: var(--f-titulo); font-size: clamp(2.8rem, 6.5vw, 5.4rem); font-weight: 900; font-stretch: 62%; line-height: .86; letter-spacing: -.02em; overflow-wrap: anywhere; }
.fl-meta { margin: .6rem 0 0; font-family: var(--f-titulo); font-size: .88rem; color: var(--tinta-3); }
.fl-bio { max-width: 46ch; margin: .8rem 0 0; font-family: var(--f-texto); font-size: 1.12rem; line-height: 1.5; }
.fl-bio:empty { display: none; }
.fl-redes { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .9rem 0 0; padding: 0; list-style: none; font-family: var(--f-titulo); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.fl-redes:empty { display: none; }
.fl-redes { gap: .5rem; }
.fl-redes a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2px solid var(--fio-claro); color: var(--tinta); transition: color 160ms ease, border-color 160ms ease; }
.fl-redes a:hover { color: var(--brasa); border-color: var(--brasa); }
.fl-redes svg { width: 1.15rem; height: 1.15rem; }
@media (pointer: coarse) { .fl-redes a { width: 2.75rem; height: 2.75rem; } }
.fl-nivel { padding: 1rem 1.1rem; background: var(--papel-2); }
.fl-rotulo { margin: 0; font-family: var(--f-titulo); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-3); }
.fl-nivel-nome { margin: .15rem 0 .7rem; font-family: var(--f-titulo); font-size: 2.1rem; font-weight: 900; font-stretch: 62%; line-height: .95; color: var(--brasa-escura); }
.fl-barra { height: 6px; background: var(--fio-claro); }
.fl-barra span { display: block; height: 100%; width: 0; background: var(--brasa); transform-origin: 0 50%; }
.fl-falta { margin: .5rem 0 0; font-family: var(--f-titulo); font-size: .78rem; color: var(--tinta-2); }
.fl-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--fio-claro); }
.fl-numeros div { padding: 1.1rem 0; }
.fl-numeros div + div { padding-left: 1.2rem; border-left: 1px solid var(--fio-claro); }
.fl-numeros dt { font-family: var(--f-titulo); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); }
.fl-numeros dd { margin: .2rem 0 0; font-family: var(--f-titulo); font-size: 2.6rem; font-weight: 900; font-stretch: 62%; line-height: 1; }
.fl-secao { margin-top: 2.8rem; }
.fl-cab-info { margin: 0 0 0 auto; font-family: var(--f-titulo); font-size: .8rem; color: var(--tinta-3); }
/* conquistas: carimbo em brasa quando ganha; tracejado e apagado enquanto não */
.fl-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .8rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.fl-conquista { position: relative; padding: .9rem 1rem 1rem; border: 2px dashed var(--fio-claro); color: var(--tinta-3); }
.fl-conquista h3 { margin: 0 0 .3rem; font-family: var(--f-titulo); font-size: 1.2rem; font-weight: 900; font-stretch: 68%; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.fl-conquista p { margin: 0; font-family: var(--f-titulo); font-size: .8rem; line-height: 1.4; }
.fl-conquista .fl-quando { margin-top: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.fl-conquista.ganha { border: 3px solid var(--brasa); color: var(--tinta); }
.fl-conquista.ganha h3 { color: var(--brasa-escura); }
.fl-conquista.em-breve { opacity: .7; }
.fl-falas { margin: 1rem 0 0; padding: 0; list-style: none; }
.fl-falas li { padding: .9rem 0; border-bottom: 1px solid var(--fio-claro); }
.fl-falas q { display: block; font-family: var(--f-texto); font-size: 1.05rem; quotes: "“" "”"; }
.fl-falas a { display: inline-block; margin-top: .35rem; font-family: var(--f-titulo); font-size: .78rem; color: var(--tinta-3); }
.fl-falas a:hover { color: var(--brasa-escura); }
.fl-vazio { margin: 1rem 0 0; font-family: var(--f-texto); color: var(--tinta-2); }
.fl-editar { margin-top: 3rem; border-top: 3px solid var(--tinta); }
.fl-editar summary { padding: 1rem 0; font-family: var(--f-titulo); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.fl-editar summary:hover { color: var(--brasa-escura); }
@media (max-width: 900px) {
  .ficha-leitor { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
  .fl-foto { width: 120px; height: 120px; }
  .fl-inicial { font-size: 4.2rem; }
  .fl-nivel { grid-column: 1 / -1; }
  .fl-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-numeros div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .conta-perigo { margin-left: 0; }
}
/* texto que ainda depende de decisão do autor: bem visível, nunca publicar assim */
.pendente { background: #ffc83d; color: #161512; padding: 0 .2em; }
@media (max-width: 560px) {
  .topo-acoes { gap: .4rem; }
  .topo-acoes .btn[data-conta] { padding-inline: .5rem; font-size: .7rem; }
  .logo { font-size: 2rem; }
}

/* Entrevista: pergunta da redação, resposta do entrevistado com o nome em cima e régua em brasa */
.texto .entrevista h3 { margin-top: 2.2em; }
.fala-quem { display: block; margin: 0 0 .35rem; font-family: var(--f-titulo); font-size: .68rem; font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-3); }
.texto .resposta { margin: .9rem 0 0; padding-left: 1.2rem; border-left: 3px solid var(--brasa); }
.texto .resposta > .fala-quem { color: var(--brasa-escura); }
.texto .resposta .figura { margin-left: 0; }

/* ---------- comentários das matérias ---------- */
.comentarios { margin-top: 3.5rem; }
.com-area { max-width: 46rem; }
.com-entrar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1.2rem 0 0; font-family: var(--f-titulo); font-size: .88rem; color: var(--tinta-3); }
.com-form { display: grid; gap: .45rem; margin: 1.2rem 0 0; }
.com-form label[for] { font-family: var(--f-titulo); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.com-form textarea { padding: .75rem .85rem; border: 2px solid var(--fio-claro); background: var(--papel); color: var(--tinta); font: 1.02rem/1.5 var(--f-texto); resize: vertical; }
.com-form-pe { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.com-conta { margin-left: auto; font-family: var(--f-titulo); font-size: .78rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.com-status { min-height: 1.3em; margin: .8rem 0 0; font-family: var(--f-titulo); font-size: .88rem; font-weight: 700; }
.com-lista { margin: .6rem 0 0; padding: 0; list-style: none; }
.com-vazio { padding: 1.2rem 0; font-family: var(--f-texto); color: var(--tinta-2); }
.com-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; padding: 1.1rem 0; border-top: 1px solid var(--fio-claro); }
.com-foto { width: 2.5rem; height: 2.5rem; background: var(--brasa); }
.com-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.com-foto span { display: grid; place-items: center; height: 100%; font-family: var(--f-titulo); font-size: 1.3rem; font-weight: 900; color: #fff; }
.com-quem { margin: 0; font-family: var(--f-titulo); font-size: .88rem; font-weight: 800; }
.com-quem a:hover { color: var(--brasa-escura); }
.com-quem span { font-weight: 400; color: var(--tinta-3); }
.com-texto { margin: .3rem 0 0; font-family: var(--f-texto); font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; }
.com-spoiler { margin: .4rem 0 0; }
.com-spoiler button { padding: .4rem .7rem; border: 2px dashed var(--fio-claro); background: none; color: var(--tinta-2); font: 700 .8rem var(--f-titulo); cursor: pointer; }
.com-acoes { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; font-family: var(--f-titulo); font-size: .78rem; color: var(--tinta-3); }
.com-acoes button { padding: .25rem 0; border: 0; background: none; color: var(--tinta-3); font: inherit; font-weight: 700; cursor: pointer; }
.com-acoes button:hover:not(:disabled) { color: var(--brasa-escura); }
.com-acoes button[aria-pressed="true"] { color: var(--brasa-escura); }
.com-acoes button:disabled { cursor: default; opacity: .6; }
.com-denuncia { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; width: 100%; margin-top: .4rem; }
.com-denuncia select { padding: .35rem; border: 2px solid var(--fio-claro); background: var(--papel); color: var(--tinta); font: inherit; }
@media (pointer: coarse) { .com-acoes button { min-height: 2.75rem; } }
/* aviso da conquista secreta */
.konami { position: fixed; z-index: 50; left: 50%; bottom: 1.5rem; margin: 0; padding: .8rem 1.1rem; transform: translateX(-50%); background: var(--brasa-botao); color: #fff; font: 800 .9rem var(--f-titulo); }

/* selos ao lado do nome: verificado (redondo, borda ondulada) e platinou o perfil (o controle da marca), ambos em brasa */
.selo:has(svg) { display: inline-block; width: 1.05em; height: 1.05em; margin-left: .18em; vertical-align: -.16em; font-size: inherit; letter-spacing: 0; }
.selo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.selo-platina svg { transform-origin: 50% 55%; }
.fl-nome .selo { width: .62em; height: .62em; margin-left: .14em; vertical-align: .02em; }
.fl-nome .selo-platina { width: 1em; height: .62em; }
.com-quem b { font-weight: 800; }
.com-quem .selo { width: 1.1em; height: 1.1em; margin: 0 0 0 .3em; vertical-align: -.22em; }
.com-quem .selo-platina { width: 1.7em; height: 1.05em; vertical-align: -.2em; }
.com-arroba { font-weight: 400; color: var(--tinta-3); }
.com-arroba a { color: inherit; }
.com-arroba a:hover { color: var(--brasa-escura); }
.fl-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 1rem 0 0; font-family: var(--f-titulo); font-size: .85rem; color: var(--tinta-3); }

.fl-link .btn { padding: .35rem .6rem; font-size: .7rem; }

/* ajuste da foto de perfil (dialog nativo: prende o foco e fecha no Esc) */
.foto-editor { width: min(92vw, 26rem); max-width: none; padding: 0; border: 0; background: var(--papel); color: var(--tinta); }
.foto-editor::backdrop { background: rgba(10, 9, 8, .82); }
.foto-editor form { display: grid; gap: .9rem; padding: 1.4rem; }
.foto-editor h2 { margin: 0; font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 900; font-stretch: 62%; line-height: 1; text-transform: uppercase; }
.fe-quadro { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #131211; outline: 2px solid var(--fio-claro); cursor: grab; touch-action: none; }
.fe-quadro:focus-visible { outline-color: var(--brasa); }
.fe-quadro:active { cursor: grabbing; }
.fe-quadro img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.fe-dica { margin: 0; font-family: var(--f-titulo); font-size: .8rem; color: var(--tinta-3); }
.fe-zoom { display: grid; gap: .3rem; font-family: var(--f-titulo); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.fe-zoom input { width: 100%; accent-color: var(--brasa-botao); }
.fe-modos { display: flex; flex-wrap: wrap; gap: .5rem; }
.fe-modos [aria-pressed="true"] { border-color: var(--brasa); color: var(--brasa-escura); }
.contato { width: min(92vw, 34rem); }
.contato .conta-check { align-items: baseline; margin-top: .2rem; }
.contato .conta-check input { flex: none; transform: translateY(.15rem); }
.contato .conta-check input { accent-color: var(--brasa-botao); }
.contato textarea { resize: vertical; }
/* quadro oficial da loja (widget da Steam): largura fixa de 646 px no original; abaixo disso, encolhe por escala */
.figura-loja .loja-quadro { position: relative; width: 100%; max-width: 646px; height: 190px; overflow: hidden; }
.figura-loja iframe { position: absolute; top: 0; left: 0; width: 646px; height: 190px; border: 0; transform-origin: 0 0; } /* fora do fluxo: não alarga a coluna */
/* links de afiliado: rel="sponsored"; o aviso fica colado nos links */
.aviso-afiliado { margin: .6rem 0 0; font-family: var(--f-titulo); font-size: .74rem; line-height: 1.45; color: var(--tinta-3); }
.ct-envios .ct-fecha { order: -1; margin-right: auto; }
.fe-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }

/* redes da Pixel Culture no fim do menu */
.nav-redes { display: flex; align-items: center; gap: .1rem; margin-left: auto; padding-left: 1.2rem; }
.nav-redes span { margin-right: .35rem; font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: var(--tinta-2); } /* mesmo desenho dos itens do menu */
.nav .nav-redes a { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; color: var(--tinta); transition: color 160ms ease; }
.nav .nav-redes a:hover { color: var(--brasa); }
.nav-redes svg { width: 1.2rem; height: 1.2rem; }

/* conta no topo: foto e, embaixo, o nome e o nível */
.conta-topo { display: grid; justify-items: center; gap: .15rem; min-width: 3.4rem; max-width: 8rem; padding: .1rem .2rem; text-align: center; }
.ct-foto { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; overflow: hidden; background: var(--brasa); color: #fff; font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 900; }
.ct-foto img { width: 100%; height: 100%; object-fit: cover; }
.ct-nome { max-width: 100%; overflow: hidden; font-family: var(--f-titulo); font-size: .78rem; font-weight: 800; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.ct-nivel { font-family: var(--f-titulo); font-size: .64rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .1em; color: var(--brasa-escura); }
.conta-topo:hover .ct-foto { outline: 2px solid var(--brasa); outline-offset: 2px; }
@media (max-width: 560px) {
  .ct-nome, .ct-nivel { display: none; }
  .conta-topo { min-width: 0; padding: 0; }
}

/* Buscar é uma lupa em qualquer tela (o texto segue como nome do botão pra leitor de tela); abre a barra de busca */
.btn-busca { position: relative; width: 2.75rem; min-height: 2.6rem; padding: 0; }
.btn-busca .btn-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn-busca::before { content: ""; position: absolute; top: 50%; left: 50%; width: .8rem; height: .8rem; border: 2px solid currentColor; border-radius: 50%; transform: translate(-62%, -62%); }
.btn-busca::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: .5rem; background: currentColor; transform: translate(.22rem, .08rem) rotate(-45deg); }
.btn-busca[aria-expanded="true"] { border-color: var(--brasa); color: var(--brasa); }

/* topo: lupa e luz numa barrinha em cima do Newsletter; o perfil ocupa as duas linhas à direita */
.topo-acoes { display: grid; grid-template-columns: auto auto; column-gap: .9rem; row-gap: .4rem; align-items: center; }
.topo-util { grid-column: 1; grid-row: 1; display: flex; justify-content: flex-end; gap: .4rem; }
.topo-util .btn { min-height: 2.25rem; }
.topo-util .btn-busca { width: 2.4rem; min-height: 2.25rem; }
.topo-acoes > .btn-cheio { grid-column: 1; grid-row: 2; text-align: center; }
.topo-acoes > [data-conta] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 760px) {
  /* sem Newsletter no topo: barrinha e perfil lado a lado */
  .topo-acoes { display: flex; align-items: center; gap: .4rem; }
}

/* topo compacto: a barrinha (lupa, luz), o Newsletter e o perfil somam mais ou menos a altura do nome do site */
.topo-acoes { column-gap: .7rem; row-gap: .3rem; }
.topo-util .btn { min-height: 1.85rem; padding: .25rem .55rem; font-size: .66rem; }
.topo-util .btn-busca { width: 2.05rem; min-height: 1.85rem; padding: 0; }
.topo-util .btn-busca::before { width: .68rem; height: .68rem; }
.topo-util .btn-busca::after { height: .42rem; transform: translate(.18rem, .06rem) rotate(-45deg); }
.topo-util .alavanca { width: 1.2rem; height: 1.2rem; }
.topo-acoes > .btn-cheio { min-height: 1.85rem; padding: .38rem .75rem; font-size: .66rem; }
.topo-acoes > .btn[data-conta] { padding: .38rem .7rem; font-size: .66rem; }
.ct-foto { width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }
.ct-nome { font-size: .7rem; }
.ct-nivel { font-size: .56rem; }
.conta-topo { gap: .12rem; }
@media (pointer: coarse) {
  /* no toque, a barrinha volta a ter alvo de 44 px */
  .topo-util .btn, .topo-util .btn-busca { min-height: 2.75rem; }
  .topo-util .btn-busca { width: 2.75rem; }
}

.foto-editor.fe-larga { width: min(94vw, 46rem); }
/* aviso vazio não ocupa espaço (segue na página como região de status) */
.conta-status:empty { min-height: 0; margin: 0; }
.conta-perfil .ficha-leitor { padding-top: .5rem; }

/* capa do perfil: fundo da ficha e dos números. Com imagem, uma camada escura embaixo e à esquerda
   garante a leitura, como nos destaques da capa; a foto e o texto ao lado dela alinham pelo topo.
   Sem imagem, ficha normal. */
.fl-cabeca { position: relative; isolation: isolate; }
.fl-capa { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fl-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-cabeca.tem-capa { color: #f6f2ea; }
.fl-cabeca.tem-capa .fl-capa::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 9, 8, .94) 0%, rgba(10, 9, 8, .7) 40%, rgba(10, 9, 8, .3) 100%),
    linear-gradient(to right, rgba(10, 9, 8, .55) 0%, rgba(10, 9, 8, 0) 70%);
}
.fl-cabeca.tem-capa .ficha-leitor { align-items: start; padding: 2.2rem 2rem 1.8rem; border-bottom-color: rgba(246, 242, 234, .6); }
/* sobre a capa o nível vira crédito: régua em brasa na lateral, sem caixa, embaixo (onde a camada é mais escura) */
.fl-cabeca.tem-capa .fl-nivel { align-self: end; margin-top: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--brasa); background: none; }
.fl-cabeca.tem-capa .fl-numeros { padding: 0 2rem; border-bottom: 0; }
.fl-cabeca.tem-capa .fl-numeros div + div { border-left-color: rgba(246, 242, 234, .18); }
.fl-cabeca.tem-capa .fl-numeros dt, .fl-cabeca.tem-capa .fl-meta, .fl-cabeca.tem-capa .fl-falta, .fl-cabeca.tem-capa .fl-rotulo { color: #cfc7ba; }
.fl-cabeca.tem-capa .fl-bio { color: #f6f2ea; }
.fl-cabeca.tem-capa .fl-redes a { border-color: rgba(246, 242, 234, .35); color: #f6f2ea; }
.fl-cabeca.tem-capa .fl-redes a:hover { border-color: var(--brasa); color: var(--brasa); }
.fl-cabeca.tem-capa .fl-nivel-nome { color: #ff6a3d; }
.fl-cabeca.tem-capa .fl-barra { background: rgba(246, 242, 234, .22); }
.fl-cabeca.tem-capa .fl-link .btn { border-color: rgba(246, 242, 234, .5); color: #f6f2ea; }
@media (max-width: 900px) {
  .fl-cabeca.tem-capa .ficha-leitor { padding: 1.4rem 1.1rem 1.3rem; }
  .fl-cabeca.tem-capa .fl-numeros { padding: 0 1.1rem; }
}

/* ---------- arquivo de notícias (noticias.html) ---------- */
.lista-noticias { display: grid; gap: 0; padding-bottom: 4rem; }
.busca-pagina { display: flex; gap: .6rem; padding-bottom: 1.6rem; }
.busca-pagina input { flex: 1; min-width: 0; padding: .7rem .8rem; border: 2px solid var(--fio-claro); background: var(--papel); color: var(--tinta); font: inherit; font-family: var(--f-texto); }
.escuro .busca-pagina input { border-color: var(--regua); }
.lista-vazia { margin: 0; padding: 1.6rem 0; border-top: 1px solid var(--fio-claro); font-family: var(--f-texto); color: var(--tinta-2); }
.item-noticia { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.6rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--fio-claro); }
.item-noticia .capa { aspect-ratio: 16 / 9; }
.item-noticia .chapeu { margin: 0 0 .35rem; }
.item-noticia h2.t { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; }
.item-noticia-fina { max-width: 60ch; margin: .55rem 0 .5rem; font-family: var(--f-texto); font-size: 1.02rem; line-height: 1.5; color: var(--tinta-2); }
.origem-mini { color: var(--tinta-3); }
.origem-mini.origem-rumor { color: var(--brasa-escura); }
@media (max-width: 760px) {
  .item-noticia { grid-template-columns: 1fr; gap: .8rem; }
}

/* menu no celular: quebra em linhas em vez de rolar para o lado (as redes ficam no rodapé) */
@media (max-width: 760px) {
  .nav ul { flex-wrap: wrap; overflow: visible; }
  .nav a { padding: .55rem .6rem .5rem; font-size: .78rem; border-bottom-width: 3px; }
  .nav li:first-child a { padding-left: 0; }
  .nav-redes { display: none; }
  .nav-sep { flex-basis: 100%; width: auto; height: 0; margin: 0; background: none; } /* plataformas numa linha só delas */
  .nav-plat a { font-size: .82rem; }
}