/* =====================================================================
   Remy Zdrojeski  |  portal de noticias pop punk / emo
   Tema claro. Uma cor por editoria. CSS nativo, zero biblioteca.
   ===================================================================== */

/* =====================================================================
   Fontes servidas pelo proprio dominio.
   Antes vinham do Google Fonts, que custava DOIS dominios externos no
   caminho critico: o CSS em fonts.googleapis.com bloqueava a renderizacao e
   so entao os .woff2 eram pedidos em fonts.gstatic.com, num segundo pulo.
   No celular isso era a maior espera da pagina.
   So os subconjuntos latin e latin-ext: pt-BR, en-US e es cabem neles.
   ===================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* A transicao entre paginas (@view-transition { navigation: auto }) foi
   removida em 2026-08-20 porque era a causa do "cliquei e a pagina nao abre"
   no celular: nela o navegador segura a pagina ANTIGA na tela, sem indicador
   de carregamento, ate a nova estar pronta para pintar. Em rede movel isso
   vira um congelamento de varios segundos sem nenhum retorno visual, e o
   leitor toca de novo achando que o link falhou.
   Sem ela o navegador volta a mostrar o progresso normalmente. */

:root {
  /* Papel e tinta */
  --paper:   #ffffff;
  --paper-2: #f7f7f8;
  --paper-3: #f0f0f2;
  --ink:     #0b0b0c;
  --ink-2:   #3f3f46;
  --ink-3:   #71717a;
  --line:    #e7e7ea;
  --line-2:  #d4d4d8;

  /* Uma cor por editoria, todas AA sobre branco */
  --ed-noticias:    #d6003f;
  --ed-lancamentos: #6d28d9;
  --ed-turnes:      #0e7490;
  --ed-videos:      #c0400c;
  --ed-entrevistas: #1d4ed8;
  --ed-cena:        #a21caf;
  --ed-festivais:   #166534;
  --ed-brasil:      #9b5e07;
  --ed-inicio:      #18181b;   /* Inicio nao e editoria: fica neutro */
  --ed-warped:      #af5109;   /* tema, nao editoria: ambar, tom que sobrava */
  --ed-endcruise:   #0d7a5f;   /* tema: verde-mar, o unico canto do circulo que ainda estava livre */

  /* Superficie escura do topo, a mesma familia do rodape: o portal abre e
     fecha em preto, e o conteudo fica na faixa branca do meio. */
  --topo:         #0b0b0c;
  --topo-2:       #17171a;   /* campo de busca, pilulas, botoes */
  --topo-3:       #1f1f23;   /* mesmo, com foco */
  --topo-linha:   #27272a;
  --topo-tinta:   #f4f4f5;
  --topo-tinta-2: #a1a1aa;

  /* As cores de editoria foram escolhidas para passar em contraste SOBRE
     BRANCO, e no escuro todas reprovam: lancamentos cai para 2,77:1 e
     entrevistas para 2,94:1, longe do minimo de 4,5:1. Estas sao as mesmas
     cores clareadas ate ~6:1 sobre preto, mantendo o tom.

     No tema claro valem so dentro da barra de editorias, que e a unica
     superficie escura da pagina. No tema escuro elas viram as cores de
     editoria do site inteiro (ver o bloco [data-tema="escuro"] no fim do
     arquivo), e e por isso que festivais e brasil, que so tinham a versao
     escura, ganharam a delas: sem isso as duas secoes ficariam em 2,95:1
     e 4,27:1 sobre o preto. */
  --ed-claro-noticias:    #ff336f;
  --ed-claro-lancamentos: #9f72e6;
  --ed-claro-turnes:      #1296ba;
  --ed-claro-videos:      #f05211;
  --ed-claro-entrevistas: #6285ea;
  --ed-claro-cena:        #d54ae2;
  --ed-claro-festivais:   #229d51;
  --ed-claro-brasil:      #c57809;
  --ed-claro-inicio:      #e4e4e7;
  --ed-claro-warped:      #f5a524;
  --ed-claro-endcruise:   #16c490;

  /* Forca do retangulo sob o cursor, na barra de secoes.
     Cada secao pinta com a PROPRIA cor: o hover e
     `color-mix(in srgb, var(--ed) var(--menu-hover-op), transparent)`,
     e esta variavel e so o quanto dessa cor entra na mistura.

     E variavel, e nao numero solto na regra, porque a secao ATIVA usa o
     mesmo valor: mexer aqui move as duas juntas, que e o que mantem a barra
     coerente. Foi escolhido de olho, comparando no ar em 8, 12, 16 e 20.

     Historico, para eu nao repetir o erro: 20% era o valor de origem e o
     usuario achou forte demais. Minha primeira tentativa foi tirar a cor e
     deixar um cinza igual para todas, e era leitura errada do pedido: o que
     ele queria era a cor de cada secao, so que mais fraca.

     Um efeito que sobra e nao e defeito: INICIO (#e4e4e7) rende sempre mais
     luz que as outras na mesma porcentagem, porque a cor dela e quase
     branca. Comparado no ar em 16% e aprovado assim. */
  --menu-hover-op: 16%;

  /* Cor da editoria em contexto. Cada bloco sobrescreve com data-ed. */
  --ed: var(--ed-noticias);

  /* Forma */
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   20px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgb(11 11 12 / .04), 0 1px 3px rgb(11 11 12 / .05);
  --sh-2: 0 6px 16px rgb(11 11 12 / .07), 0 16px 40px rgb(11 11 12 / .07);

  --t:      180ms cubic-bezier(.2, .7, .3, 1);
  --t-slow: 420ms cubic-bezier(.2, .7, .3, 1);

  --wrap: 1280px;

  /* Altura da faixa de editorias: 15 + 10 de padding mais os 38px da pilula.
     Serve de medida de respiro abaixo dela, para o conteudo comecar a mesma
     distancia que a barra ocupa. Nao da para calcular em CSS porque a altura
     da pilula e metrica de fonte. */
  --menu-alt: 63px;

  --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --serif:   'Newsreader', Georgia, serif;
}

[data-ed="noticias"]    { --ed: var(--ed-noticias); }
[data-ed="lancamentos"] { --ed: var(--ed-lancamentos); }
[data-ed="turnes"]      { --ed: var(--ed-turnes); }
[data-ed="videos"]      { --ed: var(--ed-videos); }
[data-ed="entrevistas"] { --ed: var(--ed-entrevistas); }
[data-ed="cena"]        { --ed: var(--ed-cena); }
[data-ed="festivais"]   { --ed: var(--ed-festivais); }
[data-ed="brasil"]      { --ed: var(--ed-brasil); }
[data-ed="inicio"]      { --ed: var(--ed-inicio); }
[data-ed="warped"]      { --ed: var(--ed-warped); }
[data-ed="endcruise"]   { --ed: var(--ed-endcruise); }

/* A barra de secoes NAO tem mais mapeamento proprio de cor, e a ausencia e
   deliberada. Enquanto ela era preta dentro de um site claro, era o unico
   lugar que precisava das --ed-claro-*; desde que ela virou cinza igual ao
   cabecalho (28/08/2026), a cor certa dentro dela e a mesma do resto da
   pagina, seja qual for o tema. Quem escolhe passou a ser so o tema: no
   claro --ed-* sao as cores base, no escuro elas apontam para as claras.
   Repor regras aqui quebraria o contraste do tema claro. */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ed);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ed); color: #fff; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: 16px; top: 16px; z-index: 99;
  padding: 10px 16px;
  /* Escuro sobre claro. Era o contrario ate 22/08/2026, quando o topo era
     preto; com o cabecalho em cinza claro, o par antigo sumia no fundo. */
  background: var(--ink); color: #fff;
  border-radius: var(--r-full);
}

/* ---------------------------------------------------------------- topo */
/* ---- O topo inteiro numa cor so, no tema claro ---------------------
   Feito redefinindo as variaveis --topo-* SO nestes elementos, e nao no
   :root: quem le --topo no escuro continua pegando o preto da raiz.

   **A barra de secoes entrou aqui em 28/08/2026**, a pedido do usuario, e
   ate entao ela era a unica faixa preta do tema claro. Ela e irma do
   cabecalho, nao filha, por isso precisa estar nomeada na regra.

   Isso obrigou a desfazer o mapeamento das cores claras dentro da barra:
   as --ed-claro-* existem para ter contraste sobre PRETO, e sobre o cinza
   novo todas reprovariam. Com a barra clara, cada secao volta a usar a
   propria cor base, que e a que passa AA sobre claro. Ver o bloco de
   [data-ed] logo abaixo, onde as regras da barra deixaram de existir.

   Como tudo no topo ja lia essas variaveis, a virada inteira, texto, campo
   de busca, clima, bandeiras e pilulas, sai destas seis linhas. */
.topbar,
.masthead,
.editorias {
  --topo:         var(--paper-3);
  --topo-2:       var(--paper);
  --topo-3:       var(--paper-2);
  --topo-linha:   var(--line);
  --topo-tinta:   var(--ink);
  /* --ink-2 e nao --ink-3, que seria o equivalente direto do cinza que
     havia no escuro. Medido no ar sobre o cinza novo: --ink-3 da 4,25:1,
     e a data e a assinatura da marca tem 12px e 10,9px, tamanho que a AA
     exige 4,5:1. Com --ink-2 sobe para 9,18:1. No preto o par antigo dava
     7,56:1, entao clarear o fundo sem escurecer o texto teria trocado um
     cabecalho legivel por um quase legivel. */
  --topo-tinta-2: var(--ink-2);
}

.topbar {
  background: var(--topo);
  border-bottom: 1px solid var(--topo-linha);
  color: var(--topo-tinta-2);
  font-size: .75rem;
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}
.topbar__esq {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.topbar__data {
  color: var(--topo-tinta-2);
  text-transform: capitalize;
  letter-spacing: .005em;
  white-space: nowrap;
}

/* Clima da cidade do visitante. Chega por JS depois da pagina abrir, entao
   nasce com [hidden]; se a consulta falhar, simplesmente nunca aparece. */
.clima {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--topo-linha);
  color: var(--topo-tinta-2);
  white-space: nowrap;
  animation: clima-entra 260ms cubic-bezier(.2, .7, .3, 1);
}
.clima[hidden] { display: none; }
.clima__i { width: 18px; height: 18px; flex: none; }
.clima__t { font-weight: 800; color: var(--topo-tinta); }
.clima__mm { color: var(--topo-tinta-2); }
/* Sem separador, "21 Max.23 Min.19" vira um numero so aos olhos. */
.clima__mm::before,
.clima__c::before {
  content: '·';
  margin-right: 7px;
  color: var(--ink-3);
}
.clima__c {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--topo-tinta-2);
}
.clima__c strong { font-weight: 700; color: var(--topo-tinta); }

@keyframes clima-entra {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* Seletor de idioma: so a bandeira, sem sigla. O nome do idioma continua no
   DOM em .sr para leitor de tela, e no title para quem passa o mouse. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.langs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--topo-2);
  border-radius: var(--r-full);
}
.langs__a {
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: var(--r-full);
  transition: background var(--t), transform var(--t);
}
.bandeira {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  /* Contorno claro: no escuro, borda preta some e a bandeira fica flutuando. */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
  /* So esmaecer, sem dessaturar. Tirar a cor transformava a bandeira da
     Espanha, que e vermelho e amarelo, num retangulo marrom sem desenho
     nenhum a 24x16. Com opacidade sozinha ela continua legivel. */
  opacity: .5;
  transition: filter var(--t), transform var(--t);
}
.bandeira svg { display: block; width: 100%; height: 100%; }
.langs__a:hover .bandeira { opacity: 1; transform: scale(1.06); }
.langs__a.is-on { background: #2c2c31; }
/* Sobre o cinza claro do cabecalho a pilula ativa nao pode ser preta, e o
   contorno da bandeira precisa ser escuro: o contorno branco existia para
   a bandeira nao sumir no preto, e sobre claro ele e que sumia. */
.topbar .langs__a.is-on { background: var(--paper-3); }
.topbar .bandeira { box-shadow: inset 0 0 0 1px rgb(11 11 12 / .16); }
.langs__a.is-on .bandeira { opacity: 1; }

/* ------------------------------------------------------------ masthead */
/* Grade de tres colunas com a marca no centro. A terceira coluna esta vazia
   desde que o Instagram saiu do cabecalho, em 22/08/2026, e e ela que mantem
   a logo no meio da pagina: a marca e o segundo filho do grid e cai na coluna
   central por conta propria, sem espacador nenhum no HTML. */
/* O padding lateral repete o do .wrap de proposito: a forma abreviada zera o
   que vem da classe, e sem ele a busca encostava na borda enquanto os cards
   comecavam 24px para dentro. */
/* O brilho vermelho difuso que ficava aqui saiu junto com o do rodape. Ele
   existia para dar profundidade ao preto; sobre o cinza claro so sujava.
   Com ele foram o ::after inteiro, o isolation e o overflow, que existiam
   so para segurar o z-index -1 e impedir que o brilho vazasse para a barra
   de secoes. Para trazer de volta e preciso repor os tres juntos. */
.masthead {
  position: relative;
  background: var(--topo);
}
.masthead__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px 24px 24px;
}
.masthead__lado { display: flex; min-width: 0; }
.masthead__lado--e { justify-content: flex-start; }
.masthead__lado--d { justify-content: flex-end; }
.brand { text-align: center; }

/* Botao do Instagram, com o degrade da propria marca no hover */
.ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: var(--r-full);
  background-color: var(--topo-2);
  /* **Sem isto o degrade do hover vaza para fora da pilula.** O botao do
     rodape tem `border: 1px solid` que no hover so fica transparente, e a
     borda continua ocupando 1px. Por padrao o navegador dimensiona a imagem de
     fundo pela caixa de PADDING mas a pinta ate a caixa de BORDA, entao sobra
     1px de cada lado que ele preenche repetindo o ladrilho. No meio da altura,
     que e onde a ponta arredondada alcanca a borda da caixa, essa repeticao
     aparece: um risquinho de canto reto, roxo a esquerda e laranja a direita,
     que sao as pontas OPOSTAS do degrade. E o que denunciava o defeito.

     Medindo a caixa de borda, o ladrilho cobre tudo e nao ha o que repetir.
     Comparado no ar com background-clip: padding-box, que tambem resolve:
     aquele deixa um anel de 1px do fundo de tras aparecendo, este preenche
     ate a beirada.

     **E por isso que daqui para baixo nenhuma regra da familia .ig usa o
     `background` abreviado.** A forma abreviada zera TODAS as propriedades de
     fundo que ela nao cita, inclusive background-origin, entao um
     `background: transparent` la embaixo desfazia esta linha em silencio e o
     risquinho continuava. Levei uma rodada de teste para achar isso. Cada
     regra mexe so no que precisa: background-color ou background-image. */
  background-origin: border-box;
  color: var(--topo-tinta);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.ig svg { width: 19px; height: 19px; flex: none; }
.ig:hover {
  background-image: linear-gradient(115deg, #f9ce34, #ee2a7b 46%, #6228d7);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(238 42 123 / .3);
}
.ig:active { transform: translateY(0); }

/* Botao so com o icone, usado no cabecalho: quadrado, sem o nome do perfil.
   O nome continua escrito no rodape e no aria-label. */
.ig--icone {
  padding: 10px;
  border-radius: 50%;
}
.ig--icone svg { width: 21px; height: 21px; }
/* Marca de uma cor so. O Z vermelho saiu: a cor agora e a do hover, aplicada
   na palavra inteira. Tambem diminuiu, porque a manchete e que tem de puxar o
   olho numa capa de portal, nao o nome do site. */
.brand__logo {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 92, 'opsz' 32;
  letter-spacing: -.045em;
  line-height: .95;
  color: var(--topo-tinta);
  transition: color var(--t);
}
.brand__logo:hover { color: var(--ed-claro-noticias); }
.brand__tag {
  margin: 6px 0 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--topo-tinta-2);
}

/* Campo mais estreito e mais escuro que antes, pelo mesmo motivo do botao: no
   cabecalho ele e ferramenta, nao chamada. Fica visivel sem disputar com a
   marca, e ganha contorno so quando alguem digita nele. */
.busca {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 250px;
  padding: 3px 5px 3px 16px;
  background: var(--topo-2);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.busca:focus-within {
  background: var(--topo-3);
  border-color: #3f3f46;
  box-shadow: none;
}
.busca input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--topo-tinta);
  font-family: var(--sans);
  font-size: .88rem;
}
.busca input::placeholder { color: #8b8b94; }
/* O botao era um circulo branco cheio, com o icone preto por cima. Funcionava
   como chamada, e era esse o problema: num cabecalho onde a marca e o menu e
   que precisam ser vistos, a lupa virava a coisa mais clara da tela e puxava o
   olho antes de todo o resto. Agora ele e so o icone, no mesmo cinza do texto
   de dentro do campo, e o circulo so aparece quando o ponteiro chega perto ou
   o teclado poe foco nele. */
.busca button {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #8b8b94;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.busca button:hover,
.busca button:focus-visible {
  background: var(--topo-3);
  color: var(--topo-tinta);
}
.busca button:active { background: var(--topo-linha); }

/* ----------------------------------------------------------- editorias */
/* Faixa de todas as cores do portal, usada no topo do menu e no do rodape. */
:root {
  /* As 6 cores da bandeira do arco-iris, nas fitas oficiais, mas em degradê
     continuo: as cores se misturam de uma para a outra, como a faixa sempre
     foi neste site. Cheguei a testar em listras chapadas e o usuario preferiu
     assim.
     As cores sao as oficiais mesmo sobre o preto do topo, onde o violeta e o
     mais apagado (2:1). Clarear resolveria o contraste e descaracterizaria a
     bandeira, entao a compensacao ficou na altura da faixa, nao na cor. */
  --arco: linear-gradient(90deg,
    #e40303 0%, #ff8c00 20%, #ffed00 40%,
    #008026 60%, #004dff 80%, #750787 100%);

  /* A mesma bandeira, duas voltas completas, fechando em vermelho.
     E a imagem da faixa do menu, a que anda com a rolagem, e nao serve para
     a do rodape, que e parada e usa --arco.

     O porque das duas voltas: a faixa e desenhada com `background-size: 200%`,
     ou seja, a imagem tem o dobro da largura da tela. Com --arco, que tem uma
     volta so esticada nesses 200%, a janela visivel mostrava METADE da
     bandeira, tres ou quatro cores, e o resto ficava fora da tela. Com duas
     voltas na mesma largura, cada largura de tela mostra uma volta inteira,
     do vermelho ao violeta, em monitor largo e no telefone igual.

     O vermelho repetido no fim e o que faz a emenda sumir: quando a faixa
     anda alem do fim da imagem, o navegador repete o ladrilho, e a beirada
     encosta vermelho com vermelho em vez de violeta com vermelho. */
  --arco-fita: linear-gradient(90deg,
    #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787,
    #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787,
    #e40303);
}

.editorias {
  position: relative;
  position: sticky;
  top: 0;
  z-index: 30;
  /* Cor cheia, nao translucida. Ja foi vidro fosco e saiu: a 86% de opacidade
     o conteudo passava por baixo e sujava a barra, e o backdrop-filter e caro
     de desenhar a cada quadro da rolagem no celular. A cor sai de --topo, que
     no claro e o mesmo cinza do cabecalho e no escuro e o preto da pagina. */
  background: var(--topo);
  border-bottom: 1px solid var(--topo-linha);
}
/* A linha colorida substitui o fio cinza de cima.
   Ela anda para o lado conforme a pagina rola, presa a rolagem e nao a um
   relogio: parada, ela fica parada. Isso e `animation-timeline: scroll()`,
   feito pelo navegador na thread de composicao, entao nao custa JavaScript
   nem trava a rolagem no celular.
   Sem suporte, a regra e ignorada e a faixa fica como sempre foi. */
.editorias::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--arco-fita);
  background-size: 200% 100%;
  animation: arco-anda linear both;
  animation-timeline: scroll(root block);
  /* Obrigatorio, e nao redundante: a forma abreviada acima zera a duracao
     para 0s, e com linha do tempo de rolagem 0s congela a animacao no quadro
     inicial. 'auto' e o que estica a animacao pela rolagem inteira. */
  animation-duration: auto;
}

@keyframes arco-anda {
  from { background-position:   0% 0; }
  to   { background-position: 200% 0; }
}
.editorias__in {
  display: flex;
  gap: 4px;
  /* 15px em cima, e nao 10: a faixa colorida e absoluta e cobre os 5px do
     topo, entao ela come esse tanto do respiro. Sem descontar, a pilula da
     editoria ativa encosta na faixa e fica visivelmente alta. */
  padding: 15px 24px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  /* 'safe' e o que impede o bug classico de flex centralizado com rolagem:
     quando as editorias nao cabem, centralizar cortaria as primeiras num
     ponto inalcancavel pela rolagem. Com 'safe' o navegador volta a alinhar
     pela esquerda exatamente nesse caso. */
  justify-content: center;
  justify-content: safe center;
}
.editorias__in::-webkit-scrollbar { display: none; }

/* Sombra na borda direita, avisando que a fila continua.
   **E o unico sinal de que ha mais secoes fora da tela**, e por isso ela
   existe: sem nada ali, o corte cai no meio de uma pilula e ninguem entende
   que da para arrastar. So aparece no celular, que e onde a fila nao cabe. */
.editorias::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 0;
  bottom: 0;
  width: 52px;
  background: linear-gradient(90deg, transparent, var(--topo) 78%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
}


/* Cada editoria usa a propria cor o tempo todo, nao so quando esta ativa.
   Todas passam AA sobre branco, entao o texto colorido continua legivel. */
.editorias__a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 15px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ed);
  transition: background var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.editorias__a::before {
  content: '';
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--t);
}
.editorias__a:hover {
  background: color-mix(in srgb, var(--ed) var(--menu-hover-op), transparent);
  transform: translateY(-1px);
}
.editorias__a:hover::before { transform: scale(1.35); }
/* Ativa: o MESMO preenchimento do hover, e nao a cor cheia.
   Ate 22/08/2026 esta pilula vinha em `background: var(--ed)` com texto
   escuro e brilho embaixo. Era o par de maior contraste possivel sobre o
   preto, e era justamente o problema: gritava do lado das outras. O usuario
   pediu explicitamente nenhuma em 100%.

   O que ainda diz onde voce esta: em repouso a secao ativa e a UNICA com
   retangulo. As outras so ganham o delas quando o cursor chega. Sob o
   cursor as duas ficam iguais, e nao ha o que separar, mas ai o proprio
   cursor ja diz qual e qual. */
.editorias__a.is-on {
  background: color-mix(in srgb, var(--ed) var(--menu-hover-op), transparent);
  color: var(--ed);
  box-shadow: none;
}


/* -------------------------------------------------------------- titulos */
.secao {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 64px 0 26px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.secao__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 90;
  letter-spacing: -.03em;
  color: var(--ed);
}
.secao__link {
  position: relative;
  margin-left: auto;
  padding-bottom: 2px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--t);
}
.secao__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--ed);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t);
}
.secao__link:hover { color: var(--ed); }
.secao__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------- cards */
.card { container-type: inline-size; }

.card__foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-3);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-slow), transform var(--t-slow);
}

/* Selo de play: aparece so na capa de materia que tem video de verdade. */
.card__play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgb(11 11 12 / .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.card__play svg { width: 30px; height: 30px; margin-left: 2px; }
.card:hover .card__play { background: var(--ed-noticias); transform: scale(1.08); }
.card--g .card__play { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.card--g .card__play svg { width: 38px; height: 38px; }
/* O recorte puxa para cima, e nao para o meio. Foto de show em retrato dentro
   de uma janela 16/9 centrada mostra do queixo para baixo: sobra o baixo e
   some o rosto. A 28% o rosto entra nos dois formatos, e em paisagem o
   deslocamento e pequeno demais para notar. */
.card__foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 28%;
  transition: transform var(--t-slow), filter var(--t-slow);
}
.card:hover .card__foto {
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}
.card:hover .card__foto img { transform: scale(1.045); }

.card__txt { padding-top: 16px; }

.card__cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ed);
}
.card__cat::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ed);
}
.card__cat:hover { text-decoration: underline; text-underline-offset: 3px; }

.card__h {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'wdth' 96;
  letter-spacing: -.028em;
  line-height: 1.1;
  text-wrap: balance;
}
/* A manchete leva a cor da editoria, decidido em 2026-08-20 depois de comparar
   as versoes no site no ar. As seis cores passam AA sobre branco com folga
   (5,18 a 7,10 contra os 4,5 exigidos), entao o ganho de cor nao custa
   legibilidade. Antes disso a manchete era quase-preta.

   O hover escurece em vez de colorir, porque colorir virou o estado normal e
   o cartao ficaria sem resposta ao mouse. */
.card__h a { color: var(--ed); transition: color var(--t); }
.card:hover .card__h a { color: color-mix(in oklab, var(--ed) 62%, #12100f); }

.card__sub {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.card__meta {
  margin: 12px 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-3);
}

.card--g .card__h { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
.card--m .card__h { font-size: 1.18rem; }

/* Lista lateral: sem foto, separada por fio */
.card--p {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.card--p:last-child { border-bottom: 0; }

/* A lista da lateral fica em preto, ao contrario das outras manchetes. Ali sao
   seis ou sete titulos empilhados num bloco estreito, cada um de uma editoria:
   coloridos, viram uma coluna de cores sem hierarquia nenhuma. O chapeu acima
   de cada um ja diz a editoria. */
.card--p .card__h a { color: var(--ink); }
.card--p:hover .card__h a { color: var(--ed); }
.card--p .card__txt { padding-top: 0; }
.card--p .card__h { font-size: 1rem; line-height: 1.28; }
.card--p .card__meta { margin-top: 8px; }

@container (min-width: 420px) {
  .card--m .card__h { font-size: 1.28rem; }
}

/* ---------------------------------------------------------------- capa */
/* O respiro abaixo do menu e a propria altura do menu: 34px deixava a foto da
   manchete quase encostada na faixa preta, e a capa comecava sem folego.
   O numero nao sai de calculo em CSS porque depende da altura da pilula, que
   e metrica de fonte: e o padding da faixa (15 em cima, 10 embaixo) mais os
   38px da pilula. Mexeu no padding de .editorias__in ou no tamanho do texto
   das pilulas, confira este valor junto (o de 700px fica na media query). */
.capa { padding: var(--menu-alt) 0 12px; }

.capa__topo {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 44px;
}
.capa__sec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 34px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.mais {
  padding: 22px;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  align-self: start;
}
/* Nao voltar a `position: sticky` aqui. Ja foi assim e o efeito nao tinha para
   onde ir: com sete materias a coluna fica quase da altura da coluna da
   manchete, entao grudava por 46px de rolagem e era solta de novo. O que se
   via nao era coluna fixa, era o card descolando da manchete e voltando.
   Comparado no ar em 20/08/2026, solto ganhou. */
.mais__h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* Aqui havia um ponto vermelho pulsando antes do titulo, do tempo em que a
   coluna se chamava "Ultimas". O ponto e sinal de ao vivo, e a coluna comeca
   depois da manchete e das tres secundarias: ela nunca tem a materia mais
   nova. Com o titulo trocado para "Mais noticias", o ponto saiu junto, senao
   sobrava um sinal de tempo real numa lista que nao e tempo real. */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 42px 30px;
}

/* Manchete da editoria a esquerda, e as outras numa grade propria a direita.
   A proporcao 1.7 para 2 e a mesma de antes, quando a direita eram duas
   colunas soltas de 1fr. A diferenca e que agora elas formam um bloco que
   quebra em duas linhas quando ha materia suficiente, preenchendo a altura
   da manchete em vez de deixar um vazio embaixo. */
.bloco {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 2fr);
  gap: 30px;
}
.bloco__lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-content: start;
}

/* Editoria que ainda nao tem 5 materias: fila de cards iguais, sem manchete.
   O numero de colunas vem do PHP em --n, entao dois, tres ou quatro cards
   preenchem a largura inteira e nao sobra buraco. */
.bloco-igual {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 30px;
}
.bloco .card--g .card__h { font-size: clamp(1.4rem, 2.5vw, 1.95rem); }

/* ------------------------------------------------------------- materia */
/* A barra de leitura foi removida em 2026-08-20. Ela era uma segunda barra
   fixa no topo, na cor da editoria, e caia exatamente em cima da faixa da
   bandeira quando o menu grudava: o leitor via duas bordas empilhadas.
   A propria faixa ja anda com a rolagem, entao o retorno de progresso
   continua existindo, com um elemento so. */
.progresso { display: none; }

.materia {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 0 20px;
}

.trilha { margin-bottom: 18px; }
.trilha a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ed) 9%, var(--paper));
  color: var(--ed);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--t);
}
.trilha a:hover { background: color-mix(in srgb, var(--ed) 17%, var(--paper)); }

.materia__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 94;
  letter-spacing: -.038em;
  line-height: 1.03;
  text-wrap: balance;
  color: var(--ed);
}
.materia__sub {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.materia__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 26px 0 30px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  font-size: .8rem;
  color: var(--ink-3);
}
.materia__meta strong { color: var(--ink); font-weight: 700; }

/* O contorno encolhe ate a foto, em vez de ocupar a coluna toda: assim a
   legenda comeca na borda esquerda da imagem, e nao no meio do nada quando a
   foto e retrato. Em paisagem nada muda, porque ai a foto ja enche a coluna. */
.materia__foto {
  margin: 0 auto 32px;
  width: fit-content;
  max-width: 100%;
}

/* Foto de show vem em retrato com frequencia, e ai "width: 100%" sozinho
   empurrava o texto para quase mil pixels abaixo da dobra. Com o teto de
   altura, a paisagem continua ocupando a coluna inteira e o retrato aparece
   menor e centrado, no tamanho que jornal usa. Nada e cortado: recorte
   automatico em foto de banda decapita o musico metade das vezes. */
.materia__foto img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* Player da materia. O aspect-ratio no proprio contorno reserva a altura
   antes do iframe carregar, entao o texto abaixo nao pula (CLS). */
.materia__video { margin: 0 0 32px; }
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: var(--sh-1);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Capa do player: e a foto que o portal ja tem, com o botao por cima. O
   YouTube so entra depois do toque. */
.video__capa {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.video__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.video__capa:hover img { opacity: .68; transform: scale(1.03); }
.video__play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgb(11 11 12 / .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.video__play svg { width: 40px; height: 40px; margin-left: 3px; }
.video__capa:hover .video__play,
.video__capa:focus-visible .video__play {
  background: var(--ed-noticias);
  transform: scale(1.07);
}
@media (max-width: 700px) {
  .video__play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .video__play svg { width: 32px; height: 32px; }
}
.materia__foto figcaption {
  margin-top: 10px;
  font-size: .74rem;
  color: var(--ink-3);
}

.corpo {
  font-family: var(--serif);
  font-size: 1.24rem;
  font-variation-settings: 'opsz' 20;
  line-height: 1.68;
  color: #18181b;
  text-wrap: pretty;
}
.corpo p { margin: 0 0 1.3em; }
.corpo p:first-of-type {
  font-size: 1.34rem;
  line-height: 1.58;
  color: var(--ink);
}
.corpo p:first-of-type::first-letter {
  float: left;
  margin: .06em .09em 0 0;
  font-family: var(--display);
  font-size: 3.3em;
  font-weight: 800;
  line-height: .78;
  color: var(--ed);
}
.corpo h2 {
  margin: 1.9em 0 .6em;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ed);
}

.fonte-box {
  margin: 40px 0 0;
  padding: 24px 26px;
  background: color-mix(in srgb, var(--ed) 6%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--ed) 20%, var(--paper));
  border-radius: var(--r-lg);
}
.fonte-box__rot {
  margin: 0 0 10px;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fonte-box__a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ed);
}
.fonte-box__a span {
  transition: transform var(--t);
  display: inline-block;
}
.fonte-box__a:hover span { transform: translateX(5px); }

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 32px 0 0; }
.tags__a {
  padding: 8px 15px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
}
.tags__a:hover {
  border-color: var(--ed);
  background: var(--paper);
  color: var(--ed);
  transform: translateY(-2px);
}

/* Quebra de linha por causa do quarto icone, o do story: com ele a fila
   passa de 339px e nao cabe mais numa tela de 320. */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin: 30px 0 0; }
.share__rot {
  font-size: .69rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.share__a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t), transform var(--t), background var(--t);
}
.share__a:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
}

/* O botao do story e o unico da fila que nao e um link, entao precisa perder
   a aparencia que o navegador da a <button>. */
.share__a--story {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
/* Na fila de icones pretos, o degrade do Instagram so aparece no hover: fixo,
   ele roubaria a atencao dos outros tres. */
.share__a--story:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #f09433, #e6683c 26%, #dc2743 52%, #cc2366 74%, #bc1888);
}
/* Enquanto a arte e montada no servidor. Sem isso o toque parece nao ter
   funcionado: sao uns 300ms na primeira vez de cada materia. */
.share__a.is-carregando { opacity: .5; pointer-events: none; }

.share__aviso {
  max-width: 48ch;
  margin: 13px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* --------------------------------------------------------- listagens */
.pagina-topo {
  padding: 46px 0 22px;
  margin-bottom: 34px;
  border-bottom: 2px solid var(--ink);
}
.pagina-topo__h {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ed);
  text-wrap: balance;
}
.pagina-topo__h span { color: var(--line-2); }
.pagina-topo__n {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vazio {
  padding: 90px 0;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 60px 0 10px;
}
.pager__a, .pager__i {
  min-width: 44px;
  padding: 11px 16px;
  border-radius: var(--r-full);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pager__a {
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.pager__a:hover { border-color: var(--ink); color: var(--ink); }
.pager__i { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- rodape */
/* Cinza claro, e nao mais o preto de antes.
   O preto com brilho rosa por tras da marca puxava o olho para o fim da
   pagina como se ali tivesse alguma coisa para fazer, e nao tem: o rodape e
   endereco, nao destino. Em cinza ele encerra a pagina sem disputar com a
   materia que o leitor estava lendo. Trocado em 22/08/2026 a pedido do
   usuario, junto com a inversao de todas as cores de texto daqui para baixo. */
.rodape {
  position: relative;
  isolation: isolate;
  /* Baixo de proposito. O rodape tinha 60px de respiro em cima e 34 em
     baixo, medida de quando ele carregava tres colunas de links, um
     paragrafo sobre a redacao e o seletor de idioma. Hoje sao quatro
     elementos curtos, e o respiro de antes fazia o bloco parecer maior do
     que o que tem dentro dele. Cortado em 22/08/2026 a pedido do usuario. */
  margin-top: 70px;
  padding: 40px 0 26px;
  background: var(--paper-3);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* Mesma faixa colorida do menu, fechando a pagina */
.rodape::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--arco);
}
/* O brilho rosa difuso atras da marca saiu em 22/08/2026. Ele existia para
   dar profundidade ao preto; sobre o cinza claro so sujava. */
/* Pilha centrada no eixo da pagina: marca, botao do Instagram e fila de
   links, nessa ordem. Substituiu o grid de colunas em 22/08/2026.

   Nao ha media query para o telefone e nao e esquecimento: centrado em
   coluna unica ja e o desenho certo em qualquer largura, entao o que
   antes precisava de regra separada agora e o comportamento padrao. */
.rodape__bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
/* O gap cuida do espaco entre marca, botao e links, entao a margem que
   estes elementos trazem de fora do rodape so somaria em cima dele. */
.rodape__bloco > * { margin: 0; }
.rodape__logo {
  margin: 0;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -.04em;
  color: var(--ink);
}
/* Mesma decisao da marca do cabecalho: uma cor so, e a cor entra no hover. */
.rodape__logo { transition: color var(--t); }
.rodape__logo:hover { color: #ff2d63; }
.rodape__tag {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* .rodape__aviso e .rodape__h sairam em 22/08/2026 junto com os elementos
   que estilizavam: o paragrafo sobre como a redacao escreve, que repetia a
   nota do pe de cada materia, e o titulo "O portal", que rotulava uma
   coluna que deixou de existir. */
/* Contornado em repouso, com o degrade da marca guardado para o hover.
   Sobre o preto de antes o degrade era so mais uma cor no escuro. Sobre o
   cinza claro ele virava a coisa mais chamativa da pagina inteira, que e o
   oposto do que o rodape novo quer ser. */
.ig--rodape {
  background-color: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 10px 19px 10px 15px;
}
.ig--rodape:hover {
  background-image: linear-gradient(115deg, #f9ce34, #ee2a7b 46%, #6228d7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgb(238 42 123 / .28);
}

.rodape__ul { margin: 0; padding: 0; list-style: none; }
.rodape__ul li { margin-bottom: 11px; }
.rodape__ul a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  color: var(--ink-2);
  transition: color var(--t), transform var(--t);
}
/* O ponto colorido repete a cor da editoria, igual ao menu de cima */
.rodape__ul li[data-ed] a::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ed);
  transition: transform var(--t), box-shadow var(--t);
}
.rodape__ul a:hover { color: var(--ink); transform: translateX(3px); }
.rodape__ul li[data-ed] a:hover::before {
  transform: scale(1.5);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ed) 22%, transparent);
}
.rodape__ul--liso a { padding-left: 0; }

/* Os links do portal deitados, um do lado do outro. So couberam assim porque
   a coluna de editorias saiu: antes eram tres colunas e nao havia largura.
   O separador e ::after e nao um caractere no HTML, para nao ser lido em voz
   alta pelo leitor de tela nem virar texto selecionavel. */
.rodape__ul--fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
}
.rodape__ul--fila li { margin-bottom: 0; position: relative; }
.rodape__ul--fila li + li::after {
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 3px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--line-2);
}
.rodape__ul--fila a:hover { transform: none; }

/* O seletor de idioma nao existe mais no rodape, ficou so na barra de cima.
   O espaco entre o botao e o que vem antes e depois e o gap da pilha. */

/* Centrada em toda largura, e nao so no telefone: e a assinatura da pagina,
   e assinatura encostada na margem esquerda de uma faixa larga fica solta. */
.rodape__copy {
  margin: 26px 0 0;
  padding-top: 18px;
  text-align: center;
  border-top: 1px solid var(--line-2);
  font-size: .8rem;
  color: var(--ink-3);
}
/* O separador e um <span> e nao um caractere solto no texto: assim ele
   carrega aria-hidden e o leitor de tela anuncia "Remy Zdrojeski, e-mail"
   em vez de "Remy Zdrojeski ponto meio e-mail". */
.rodape__copy-sep { margin: 0 6px; color: var(--line-2); }
.rodape__copy a { color: var(--ink-2); }
.rodape__copy a:hover { color: var(--ink); }

/* ---------------------------------------------------------- responsivo */
@media (max-width: 1040px) {
  .capa__topo { grid-template-columns: 1fr; gap: 38px; }
  .capa__sec { grid-template-columns: 1fr 1fr; }
  .bloco { grid-template-columns: 1fr; }
  .bloco-igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Duas colunas viraram uma so nesta largura. Antes eram tres e a marca
     precisava atravessar a linha inteira com grid-column; agora que a coluna
     de editorias saiu, empilhar simples ja resolve. */
  /* O rodape nao tem mais colunas para empilhar nesta largura: ele ja e
     uma pilha centrada em qualquer tela. */
  .busca { min-width: 210px; }
}

/* ---- O cabecalho empilha antes do telefone -------------------------
   Ate 900px, e nao so ate 700. A terceira coluna cresceu quando a radio e o
   botao de seguir chegaram nela, e numa linha so o cabecalho passou a nao
   caber muito antes da largura de telefone: em 760px a busca, que tem
   min-width proprio, transbordava da coluna dela e passava por baixo da
   assinatura da marca, que por sua vez encostava na pilula da radio. Tres
   elementos disputando a mesma faixa.

   Empilhado, a marca fica com a primeira linha inteira e a busca divide a
   segunda com os dois botoes, que e o mesmo desenho que ja valia no telefone
   e que funciona em qualquer largura. Aqui os botoes mantem o texto: so
   abaixo de 700 eles viram circulo, porque e la que a largura aperta de
   verdade.

   Este bloco vem ANTES do de 700px de proposito: os dois casam na mesma
   faixa, e o de 700 precisa vir depois para vencer no que ele repete. */
@media (max-width: 900px) {
  .masthead__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'marca marca'
      'busca radio';
    gap: 16px 10px;
  }
  .brand { grid-area: marca; }
  .masthead__lado--e { grid-area: busca; }
  .masthead__lado--d { grid-area: radio; }
  /* O min-width era o que fazia a busca transbordar. Empilhada ela tem a
     linha para ela, entao pode crescer e encolher com a tela. */
  .busca { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  /* No telefone a faixa perde 2px de padding e a pilula 1px de altura. */
  :root { --menu-alt: 61px; }
  .wrap { padding: 0 18px; }
  /* A marca ocupa a primeira linha inteira, e a busca divide a segunda com a
     radio, entao a logo continua centrada no telefone.

     **A radio precisa de area nomeada, e nao e detalhe.** Sem ela o grid joga
     a pilula numa terceira linha implicita, sozinha, e o cabecalho ganha uma
     faixa vazia de 60px com um botao no canto. Foi visto no ar em 28/08/2026.
     A coluna dela e `auto`, entao ela ocupa so o que o icone precisa e a
     busca fica com o resto. */
  .masthead__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'marca marca'
      'busca radio';
    gap: 16px 10px;
    padding: 20px 18px;
  }
  .brand { grid-area: marca; }
  /* A busca dividia esta linha com o icone do Instagram ate 22/08/2026, ficou
     com ela inteira por seis dias e voltou a dividir, agora com a radio. */
  .masthead__lado--e { grid-area: busca; }
  .masthead__lado--d { grid-area: radio; }
  .busca { min-width: 0; width: 100%; }
  /* 12px de respiro lateral, e nao os 18 do .wrap: com 18 a terceira pilula
     terminava em 350 num telefone de 360, oito pixels alem da borda util. A
     pilula ja tem respiro proprio de 10px, entao o texto continua alinhando
     com o conteudo de baixo. O 14 de cima e 5 da faixa colorida + 9 de folga. */
  .editorias__in { padding: 14px 12px 9px; }


  /* Sem o pontinho e com menos respiro lateral, as tres primeiras secoes de
     MENU_ORDEM cabem na largura do telefone. Com eles, a terceira ficava
     cortada ao meio, que e justamente o que se quer evitar. A cor do texto ja
     diz a secao: o ponto e reforco, nao informacao.
     **Conferir em 360, e nao so em 375:** a diferenca entre os dois e
     exatamente o que decide se a terceira pilula aparece inteira, e 360 e
     tamanho comum de Android. */
  .editorias__in        { gap: 3px; }
  .editorias__a         { padding: 9px 10px; gap: 0; }
  .editorias__a::before { display: none; }

  /* 28px, e nao os 52 do desenho original: mais larga que isso a sombra come
     o fim de "End Cruise", que e justamente a secao que ela deveria deixar
     aparecer. Assim ela cobre so o vao depois da terceira pilula. */
  .editorias::after { opacity: 1; width: 28px; }
  /* No telefone a barra de cima nao comporta data, clima e bandeiras. A data
     cede o lugar: ela reaparece em cada materia, o clima nao. */
  .topbar__data { display: none; }
  .clima { padding-left: 0; border-left: 0; }
  /* Cortava a cidade no meio ("hoje e..."), que e justamente a informacao que
     da sentido ao resto. A maxima e a minima cedem o lugar: a temperatura de
     agora ja esta ali do lado. */
  .clima__mm { display: none; }
  .clima__c { overflow: visible; }
  .bloco, .bloco__lado, .bloco-igual, .capa__sec, .grade { grid-template-columns: 1fr; gap: 30px; }
  .capa__sec { margin-top: 28px; padding-top: 26px; }
  /* .capa tambem e .wrap, e a regra do .wrap logo acima, por vir depois,
     zerava o padding de cima: a foto da manchete encostava no menu. */
  .capa { padding: var(--menu-alt) 18px 12px; }
  /* A centralizacao do rodape no telefone saiu daqui: ela virou o padrao
     em .rodape__bloco e vale em qualquer largura. */
  .corpo { font-size: 1.14rem; }
  .corpo p:first-of-type { font-size: 1.2rem; }
  .secao { margin-top: 48px; }
  .materia { padding-top: 28px; }
}

/* Quem pediu menos movimento no sistema, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .progresso { display: none; }
}

/* ----------------------------------------------------------- festivais */
.nota {
  margin: 0 0 28px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--ed) 6%, var(--paper));
  border-left: 3px solid var(--ed);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .86rem;
  color: var(--ink-2);
}

.eventos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.evento {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.evento:hover {
  border-color: color-mix(in srgb, var(--ed) 45%, var(--line));
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}

.evento__tipo {
  align-self: flex-start;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--ed) 10%, var(--paper));
  border-radius: var(--r-full);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed);
}

.evento__h {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 94;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
  transition: color var(--t);
}
.evento:hover .evento__h { color: var(--ed); }

.evento__d {
  margin: 0;
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.evento__dados,
.evento-topo__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 6px 0 0;
}
.evento__dados div,
.evento-topo__dados div { min-width: 0; }
.evento__dados dt,
.evento-topo__dados dt {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.evento__dados dd,
.evento-topo__dados dd {
  margin: 3px 0 0;
  font-size: .9rem;
  font-weight: 600;
}
.evento-topo__dados dd a { color: var(--ed); }
.evento-topo__dados dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

.evento__n {
  margin-top: auto;
  padding-top: 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.evento-topo {
  max-width: 820px;
  margin: 0 0 20px;
}
.evento-topo__h {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 90;
  letter-spacing: -.04em;
  line-height: 1.02;
  color: var(--ed);
  text-wrap: balance;
}
.evento-topo__d {
  margin: 16px 0 0;
  max-width: 62ch;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.evento-topo__dados { margin: 26px 0 24px; gap: 14px 36px; }

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

.tags__a--ev {
  background: color-mix(in srgb, var(--ed-festivais) 9%, var(--paper));
  border-color: color-mix(in srgb, var(--ed-festivais) 26%, var(--paper));
  color: var(--ed-festivais);
  font-weight: 700;
}
.tags__a--ev:hover { border-color: var(--ed-festivais); color: var(--ed-festivais); }

/* ------------------------------------------------------ guia de evento */
/* A pagina do Warped Tour e a do End Cruise (includes/guias.php). Vem antes
   da cobertura porque quem procura pelo nome do festival quer data, cidade,
   cartaz e ingresso, e nao a materia de ontem. */

/* Os 46px do topo sao os mesmos do .pagina-topo, que e o cabecalho de
   categoria, banda e busca. O guia nascia com 8 e encostava na barra de
   secoes: pagina de assunto tem de comecar na mesma altura que as outras. */
.guia__topo {
  margin: 0 0 30px;
  padding: 46px 0 30px;
  border-bottom: 2px solid var(--ink);
}
.guia__chapeu {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed);
}
.guia__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6.4vw, 3.9rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
}
/* O ano na cor do tema: e o unico numero da pagina que muda de edicao para
   edicao, entao vale destacar do nome, que nao muda. */
.guia__h span { color: var(--ed); }

.guia__resumo {
  max-width: 64ch;
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.guia__acoes {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.botao-ingresso {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 28px 15px 23px;
  background: var(--ed);
  color: #fff;
  border-radius: var(--r-full);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ed) 32%, transparent);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.botao-ingresso svg { width: 21px; height: 21px; flex: none; }
.botao-ingresso:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 13px 30px color-mix(in srgb, var(--ed) 40%, transparent);
}
.botao-ingresso:active { transform: translateY(0); }

.guia__oficial {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t), border-color var(--t);
}
.guia__oficial:hover { color: var(--ed); border-color: var(--ed); }

.guia__numeros {
  margin: 22px 0 0;
  font-size: .84rem;
  color: var(--ink-3);
}
.guia__numeros strong { color: var(--ink); }

.guia__apurado {
  margin: 6px 0 46px;
  font-size: .78rem;
  color: var(--ink-3);
}

/* ------------------------------------------------------------- parada */
.parada {
  margin: 0 0 20px;
  padding: 26px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* A parada de hoje ganha a cor do tema em volta: numa lista de cinco datas,
   e a unica informacao que a pessoa procura de relance. */
.parada.is-agora {
  border-color: var(--ed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ed) 12%, transparent);
}
/* Encerrada continua legivel: e o registro de quem tocou, nao lixo. So perde
   o fundo branco, para nao disputar com o que ainda vai acontecer. */
.parada.is-passou { background: var(--paper-2); }
.parada.is-passou .parada__marca { color: var(--ink-3); }

.parada__cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.parada__marca {
  margin: 0 0 8px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed);
}
.parada__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.parada__onde {
  margin: 7px 0 0;
  font-size: .88rem;
  color: var(--ink-3);
}
.parada__quando {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}
.parada__quando time {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 96;
  color: var(--ink);
}
.parada__ing {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ed);
  border-bottom: 1px solid color-mix(in srgb, var(--ed) 40%, transparent);
  transition: border-color var(--t);
}
.parada__ing:hover { border-color: var(--ed); }

/* ------------------------------------------------------------- line-up */
/* Aberto por padrao so na proxima parada. Somadas, as cinco paradas do Warped
   passam de 500 nomes, e abrir tudo de uma vez transforma o guia numa lista
   de rolagem sem fim. O <details> resolve sem JavaScript e sem esconder nada
   do buscador, que le o conteudo fechado do mesmo jeito. */
.lineup__cx { border: 0; }
.lineup__h {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--t);
}
.lineup__h::-webkit-details-marker { display: none; }
.lineup__h:hover { color: var(--ed); }
.lineup__h b {
  padding: 3px 9px;
  background: color-mix(in srgb, var(--ed) 12%, var(--paper));
  border-radius: var(--r-full);
  font-size: .72rem;
  color: var(--ed);
}
.lineup__h::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t);
}
.lineup__cx[open] > .lineup__h::after { transform: translateY(1px) rotate(-135deg); }

/* Grade de atracoes com a foto de divulgacao de cada uma.
   O minmax de 112px da tres colunas num telefone de 375 e oito num monitor,
   sem ponto de corte escrito em lugar nenhum. */
.lineup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* **As duas regras abaixo sao o que segura o peso da pagina, nao enfeite.**
   O Warped tem 565 fotos somando as cinco paradas. So o `loading="lazy"` nao
   bastou: medido no ar, o navegador buscava 204 delas de uma vez, quase 5 MB,
   incluindo as de paradas com o <details> fechado. Portal de noticias vive de
   busca organica e Core Web Vitals e criterio de ranqueamento, entao isso nao
   podia ficar.

   `content-visibility` resolve porque imagem preguicosa dentro de uma subarvore
   pulada nao e buscada: a de fora do <details> aberto some por completo, e a de
   dentro so carrega quando chega perto da tela. O `contain-intrinsic-size`
   guarda a altura do card enquanto ele esta pulado, senao a barra de rolagem
   pularia a cada bloco que entra.

   Navegador sem suporte ignora as duas linhas e volta ao comportamento de
   antes, que funcionava, so pesava. */
.lineup__cx:not([open]) .lineup { content-visibility: hidden; }

.lineup li {
  content-visibility: auto;
  contain-intrinsic-size: auto 168px;
}
/* Cada nome leva para a busca do proprio nome dentro do portal: e o caminho
   direto do cartaz para a materia, e ele ja funciona para banda sobre a qual
   ainda nao escrevemos nada, que e a maioria neste momento. */
.lineup a {
  display: block;
  color: var(--ink-2);
  transition: color var(--t);
}
.lineup a:hover { color: var(--ed); }

.lineup__foto {
  display: block;
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 9px;
  background: var(--paper-3);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.lineup__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lineup a:hover .lineup__foto {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ed) 26%, transparent);
}

/* Atracao sem foto: caixa com a inicial, na cor do tema. A grade nao pode ter
   buraco, senao quem nao tem foto vira um vazio no meio da fila. */
.lineup__foto--vazia {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ed) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--ed) 20%, transparent);
}
.lineup__foto--vazia span {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  color: color-mix(in srgb, var(--ed) 55%, var(--paper));
}

.lineup__nome {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  /* Nome de banda nem sempre tem espaco onde quebrar: "Nothing,nowhere." e
     "Rosecoloredworld" vazavam da celula, porque a virgula sem espaco depois
     nao e ponto de quebra. Aqui a quebra pode cair em qualquer letra, que e
     feio uma vez e correto sempre. */
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .parada { padding: 22px 18px; }
  .parada__cab { flex-direction: column; }
  .parada__quando { align-items: flex-start; text-align: left; }
  .guia__acoes { gap: 14px; }
  .botao-ingresso { width: 100%; justify-content: center; }
}

/* Arte oficial da parada, no topo do cartao dela. Sangra ate as bordas do
   cartao, entao os cantos de cima seguem o raio do proprio cartao. */
.parada__arte {
  display: block;
  margin: -27px -29px 22px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--paper-3);
}
/* Sem recorte nenhum: a arte ja vem na proporcao de banner (1200x650, que e o
   formato de og:image) e o desenho dela e centrado. Qualquer aspect-ratio
   imposto aqui corta justamente a marca do festival, que e a unica coisa que
   a arte tem para dizer. */
.parada__arte img {
  width: 100%;
  height: auto;
  transition: transform var(--t-slow);
}
.parada__arte:hover img { transform: scale(1.02); }

@media (max-width: 700px) {
  .parada__arte { margin: -23px -19px 18px; }
  /* 88 e nao 96: no telefone de 375 sobram 303px dentro do cartao, e 96 fecha
     em duas colunas. Com tres, o line-up de 135 do Orlando vira 45 linhas em
     vez de 68. */
  .lineup { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 15px 11px; }
  .lineup__nome { font-size: .74rem; }
  .lineup__foto--vazia span { font-size: 1.7rem; }
}

/* -------------------------------------------- videos do guia do evento */
/* Grade de videos de edicoes passadas, no guia do End Cruise. Duas colunas no
   monitor e uma no telefone: video de 16:9 em tres colunas fica pequeno
   demais para valer o clique. */
.guia-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px 22px;
  margin-bottom: 48px;
}
.guia-video .video {
  margin: 0 0 12px;
  border-radius: var(--r);
  overflow: hidden;
}
.guia-video__h {
  margin: 0;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 94;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
/* O ano fica na cor do tema e do lado do titulo, e nao numa linha de data
   embaixo: numa lista de material antigo, o ano e o que separa um video do
   outro, e nao um detalhe de rodape. */
.guia-video__h span {
  margin-left: 8px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ed);
  vertical-align: middle;
}

@media (max-width: 700px) {
  .guia-videos { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
}

/* ------------------------------------------------------------------ perfil
   Pagina do editor e nota de transparencia no pe da materia.

   A pagina reaproveita .materia inteira: e um texto de coluna unica, do mesmo
   jeito que uma materia e, e duplicar a tipografia so criaria duas verdades
   sobre o mesmo desenho. O que muda e o cargo por cima do nome e a ficha de
   contato no fim. */
.perfil__cargo {
  margin: 0 0 14px;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ed);
}

/* Contato, cidade e rede numa linha so no monitor, empilhados no telefone.
   Sao tres dados curtos: em lista vertical no desktop viravam tres linhas de
   nada com muito branco em volta. */
/* A coluna minima e 240px, e nao os 190px que eu tinha posto, porque o e-mail
   do editor tem 28 caracteres e cabia em 190 so quebrando no meio do endereco.
   Endereco de e-mail partido em duas linhas parece erro de digitacao. */
.perfil__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 26px;
  margin: 38px 0 0;
  padding: 24px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.perfil__dados dt {
  margin-bottom: 6px;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.perfil__dados dd {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  /* `anywhere` quebrava o e-mail em qualquer letra. `break-word` so parte se
     nao houver mesmo saida, e o mailto abaixo garante que nunca ha. */
  overflow-wrap: break-word;
}
.perfil__dados a { color: var(--ed); }
.perfil__dados a:hover { text-decoration: underline; }

/* O endereco inteiro numa linha so, sempre. Meio ponto menor que o resto da
   ficha para caber com folga na coluna de 240px, inclusive em tela de 320. */
.perfil__dados a[href^="mailto:"] {
  display: inline-block;
  font-size: .9rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Menos respiro lateral no telefone: sao os 52px de padding que apertavam a
     coluna justamente onde a tela ja e estreita. */
  .perfil__dados { padding: 20px 18px; gap: 18px; }
}

/* Quem escreveu, quem revisou e como corrigir. Fica DEPOIS da caixa da fonte
   e antes das tags, discreto de proposito: e informacao de credito, nao
   chamada. Sem borda colorida para nao competir com .fonte-box, que e a
   caixa que o leitor deve clicar. */
.nota-red {
  margin: 18px 0 0;
  padding: 16px 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.nota-red a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.nota-red a:hover { color: var(--ed); }
.nota-red strong { color: var(--ink-2); font-weight: 700; }

/* =====================================================================
   TEMA ESCURO
   =====================================================================
   Liga por `data-tema="escuro"` no <html>, escrito pelo PHP a partir do
   cookie (ver tema_atual() em includes/layout.php). Nada aqui e !important
   e nada altera as regras de cima: o bloco so redefine as VARIAVEIS que o
   resto do arquivo ja lia, mais a lista curta de lugares onde havia cor
   escrita na mao. Por isso o tema claro continua sendo o arquivo inteiro
   acima, sem nenhuma linha mexida.

   **O preto e #000 mesmo, e nao um cinza muito escuro.** Foi o pedido, e
   em tela OLED, que e a maioria dos celulares que leem o portal, preto
   puro nao acende pixel: economiza bateria e da um contorno mais nitido
   na foto de show, que quase sempre e escura nas bordas.

   O que separa uma superficie da outra, entao, nao e mais a sombra (sombra
   preta sobre preto nao existe): e um degrau de luz muito curto,
   #000 -> #0a0a0b -> #141416, mais o fio de 1px de --line. E o mesmo
   vocabulario do tema claro invertido, nao um desenho novo.
   ===================================================================== */

[data-tema="escuro"] {
  /* Papel e tinta, invertidos. Os cinzas de texto foram escolhidos para
     casar o contraste que cada um tem no claro, e nao por simetria de
     numero: --ink-2 da 10,3:1 sobre preto (no claro da 10,4:1 sobre
     branco) e --ink-3 da 6,9:1. O --ink-3 subiu de proposito acima do
     equivalente direto, porque ele carrega texto de 12px (data, creditos,
     legenda) e no escuro fonte fina perde corpo antes de perder contraste. */
  --paper:   #000000;
  --paper-2: #0a0a0b;
  --paper-3: #141416;
  --ink:     #f4f4f5;
  --ink-2:   #b5b5be;
  --ink-3:   #93939c;
  --line:    #232326;
  --line-2:  #35353b;

  /* As cores de editoria passam a ser as claras.
     Nao e escolha nova: sao as MESMAS que a barra de secoes ja usava sobre
     o preto do topo desde sempre, medidas em ~6:1. Trazer elas para o
     documento inteiro e o que faz manchete, chapeu e link continuarem
     legiveis quando o fundo vira preto, e de quebra a pilula do menu e a
     manchete da mesma editoria passam a ser exatamente o mesmo tom, o que
     no claro nunca chegou a acontecer. */
  --ed-noticias:    var(--ed-claro-noticias);
  --ed-lancamentos: var(--ed-claro-lancamentos);
  --ed-turnes:      var(--ed-claro-turnes);
  --ed-videos:      var(--ed-claro-videos);
  --ed-entrevistas: var(--ed-claro-entrevistas);
  --ed-cena:        var(--ed-claro-cena);
  --ed-festivais:   var(--ed-claro-festivais);
  --ed-brasil:      var(--ed-claro-brasil);
  --ed-inicio:      var(--ed-claro-inicio);
  --ed-warped:      var(--ed-claro-warped);
  --ed-endcruise:   var(--ed-claro-endcruise);
  --ed: var(--ed-noticias);

  /* A barra de secoes e o preto puro da pagina, e nao mais uma faixa
     escura sobre fundo claro. Quem separa ela do cabecalho agora e a fita
     do arco-iris, que ja estava la. */
  --topo:         #000000;
  --topo-2:       #141416;
  --topo-3:       #1d1d21;
  --topo-linha:   #232326;
  --topo-tinta:   #f4f4f5;
  --topo-tinta-2: #a1a1aa;

  /* Sombra preta sobre fundo preto nao aparece, e sombra clara vira
     halo de tela velha. Ficam so como um assentamento discreto do card
     sobre as superficies #0a0a0b e #141416; quem faz o cartao "subir" no
     hover e o translateY, que continua igual. */
  --sh-1: 0 1px 2px rgb(0 0 0 / .6), 0 1px 3px rgb(0 0 0 / .5);
  --sh-2: 0 6px 16px rgb(0 0 0 / .72), 0 16px 40px rgb(0 0 0 / .6);
}

/* O cabecalho sobe um degrau em vez de descer: no claro ele e cinza sobre
   branco, aqui e #0a0a0b sobre preto. A logica da regra original vale
   igual, so trocam os valores. */
/* A barra de secoes e o preto puro da pagina, e nao o degrau do cabecalho:
   ela e uma faixa larga e fixa no alto, e clarear ela seria a maior mancha
   de cinza da tela justamente num tema que o usuario pediu preto. Quem
   separa ela do cabecalho e a fita do arco-iris, que ja estava la. */
[data-tema="escuro"] .editorias {
  --topo:       var(--paper);
  --topo-linha: var(--line);
}
[data-tema="escuro"] .topbar,
[data-tema="escuro"] .masthead {
  --topo:         var(--paper-2);
  --topo-2:       #17171a;
  --topo-3:       #202024;
  --topo-linha:   var(--line);
  --topo-tinta:   var(--ink);
  --topo-tinta-2: var(--ink-2);
}
/* O contorno da bandeira volta a ser claro. A regra do claro escurece ele
   para a bandeira nao sumir no cinza do cabecalho; aqui e o oposto. */
[data-tema="escuro"] .topbar .bandeira { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
[data-tema="escuro"] .topbar .langs__a.is-on { background: #26262b; }

/* Texto claro sobre a cor da editoria vira ilegivel: as cores claras foram
   feitas para ter 6:1 contra PRETO, entao e o preto que vai por cima delas. */
[data-tema="escuro"] ::selection      { background: var(--ed); color: var(--paper); }
[data-tema="escuro"] .pular           { color: var(--paper); }
[data-tema="escuro"] .pager__i        { color: var(--paper); }
[data-tema="escuro"] .share__a:hover  { color: var(--paper); }
[data-tema="escuro"] .botao-ingresso  { color: var(--paper); }

/* No claro o hover da manchete ESCURECE a cor da editoria, porque a cor ja
   e o estado normal e precisava sobrar resposta ao mouse. No escuro
   escurecer some no fundo: o mesmo movimento, para o outro lado. */
[data-tema="escuro"] .card:hover .card__h a {
  color: color-mix(in oklab, var(--ed) 68%, #ffffff);
}

/* Os fios de 2px que abrem secao, categoria e guia sao pretos no claro.
   Em branco puro sobre preto eles gritam mais que a manchete que
   anunciam, entao entram a 45% de luz: continuam sendo a linha mais
   forte da pagina, sem virar a mais clara. */
[data-tema="escuro"] .secao,
[data-tema="escuro"] .pagina-topo,
[data-tema="escuro"] .guia__topo {
  border-bottom-color: color-mix(in srgb, var(--ink) 45%, var(--paper));
}

/* Corpo de materia num tom abaixo do branco. Texto serifado de 1,24rem em
   #f4f4f5 sobre preto puro floresce (o serif fino "vaza" luz na borda da
   letra) e cansa em texto longo; a primeira linha, que ja e maior, fica
   com o branco cheio da regra de cima e continua abrindo a leitura. */
[data-tema="escuro"] .corpo { color: #c9c9d1; }

/* Card que no claro e branco sobre cinza, aqui e #0a0a0b sobre preto. Sem
   isso eles desapareceriam: fundo preto dentro de pagina preta sobra so a
   borda, e o cartao vira um contorno vazio. */
[data-tema="escuro"] .evento,
[data-tema="escuro"] .parada { background: var(--paper-2); }
/* E a parada que ja passou faz o caminho inverso do claro: la ela PERDE o
   branco, aqui ela perde a elevacao e volta para o preto do fundo. Nos
   dois casos a leitura e a mesma, ela deixa de disputar com o que ainda
   vai acontecer. */
[data-tema="escuro"] .parada.is-passou { background: var(--paper); }
/* A coluna "Mais noticias" nao tem borda: no claro o proprio cinza a
   destaca do branco, no escuro um fio de 1px faz o mesmo trabalho. */
[data-tema="escuro"] .mais { border: 1px solid var(--line); }

/* Preto puro, igual ao corpo da pagina, a pedido do usuario (28/08/2026).
   No claro o rodape e uma faixa cinza que fecha a pagina; no escuro faixa
   nenhuma fecha coisa alguma, porque qualquer degrau de cinza numa pagina
   preta so faz o pe parecer um bloco solto. O que encerra a pagina aqui e a
   fita do arco-iris em cima dele, que ja estava la e agora e a unica coisa
   que marca onde o conteudo acaba. */
[data-tema="escuro"] .rodape { background: var(--paper); }

/* ------------------------------------------------------ botao do tema */
/* Fica na barra de cima, colado no seletor de idioma, porque as duas coisas
   sao a mesma familia: preferencia de quem le, e nao navegacao.

   E um <a> com href de verdade (?modo=escuro) e nao um <button>: assim ele
   funciona sem JavaScript, recarregando a pagina, e o site.js so intercepta
   o clique para trocar na hora, sem ida ao servidor.

   Os dois icones vivem no HTML e o CSS escolhe qual aparece. Trocar o
   desenho por JavaScript deixaria o icone errado no primeiro quadro de cada
   pagina, que e justamente o piscar que o tema salvo em cookie evita. */
.tema-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-left: 8px;
  border-radius: var(--r-full);
  background: var(--topo-2);
  color: var(--topo-tinta-2);
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t);
}
.tema-btn:hover {
  background: var(--topo-3);
  color: var(--topo-tinta);
  transform: scale(1.06);
}
.tema-btn svg { width: 17px; height: 17px; }
/* No claro se oferece o escuro, e vice-versa: o icone e o destino, nao o
   estado atual.

   **As quatro regras carregam `.tema-btn` de novo na frente, e nao e
   redundancia.** Sem isso elas ficam com a mesma forca de `.tema-btn svg`,
   que e uma classe mais um elemento, e como aquela regra vem antes e tinha um
   `display: block`, ela vencia: no tema claro os DOIS icones apareciam lado a
   lado, lua e sol, estourando o botao. Foi visto no ar em 28/08/2026. */
.tema-btn .tema-btn__sol { display: none; }
.tema-btn .tema-btn__lua { display: block; }
[data-tema="escuro"] .tema-btn .tema-btn__lua { display: none; }
[data-tema="escuro"] .tema-btn .tema-btn__sol { display: block; }

/* A barra de cima e um flex com data+clima de um lado e o resto do outro:
   o par idioma/tema precisa andar junto para o botao nao cair sozinho no
   meio quando a data some, no telefone. */
.topbar__dir {
  display: flex;
  align-items: center;
  flex: none;
}

/* --------------------------------------------------- radio do cabecalho */
/* A pilula fica na terceira coluna do cabecalho, do lado oposto a busca, e e
   ela que equilibra a marca no meio. O quadro do player e fixo na tela, no
   canto de cima, logo abaixo da barra de secoes: ver o porque na funcao
   player_radio(), em includes/layout.php. */
.radio { display: flex; justify-content: flex-end; }

/* Mesma familia do botao do Instagram que morava aqui antes: pilula na cor da
   superficie do cabecalho, com o texto em caixa alta e pequeno. */
.radio__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 13px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--topo-2);
  color: var(--topo-tinta-2);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t);
}
.radio__btn:hover {
  background: var(--topo-3);
  color: var(--topo-tinta);
  transform: translateY(-1px);
}
.radio__btn:active { transform: translateY(0); }
/* Tocando, a pilula ganha a cor de Noticias, que e a cor de "agora" do
   portal, e o texto vira "ao vivo". E o unico lugar do cabecalho que muda de
   cor sozinho, entao ele diz de longe que ha som saindo dali. */
.radio.is-tocando .radio__btn {
  background: color-mix(in srgb, var(--ed-noticias) 18%, transparent);
  color: var(--ed-claro-noticias);
}

/* O triangulo e as barras ocupam o mesmo quadrado, um por vez. */
.radio__i {
  position: relative;
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  flex: none;
}
.radio__i svg { width: 15px; height: 15px; }
/* Mesma armadilha do botao de tema: sem repetir a classe do pai na frente,
   estas regras empatam com \`.radio__i svg\` e os dois estados aparecem
   juntos. Ver o comentario do .tema-btn logo acima. */
.radio .radio__eq   { display: none; }
.radio.is-tocando .radio__play { display: none; }
.radio.is-tocando .radio__eq   { display: flex; }

/* O rotulo troca junto com o icone: "Radio" parada, "Ao vivo" tocando.
   Os dois estao no HTML e o CSS escolhe, pelo mesmo motivo do botao de tema:
   trocar o texto por JavaScript deixaria o rotulo errado no primeiro quadro
   de cada pagina, e aqui ainda por cima o texto e traduzido. */
.radio .radio__rot--tocando { display: none; }
.radio.is-tocando .radio__rot--parado  { display: none; }
.radio.is-tocando .radio__rot--tocando { display: inline; }

/* As tres barrinhas de equalizador. Nao medem som nenhum, e nem teriam como:
   o audio esta dentro de um iframe de outro dominio. Elas dizem "ligado", que
   e a unica informacao que falta na pilula. */
.radio__eq {
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}
.radio__eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
  animation: radio-eq 900ms ease-in-out infinite;
}
.radio__eq i:nth-child(2) { animation-duration: 700ms;  animation-delay: -260ms; }
.radio__eq i:nth-child(3) { animation-duration: 1100ms; animation-delay: -520ms; }

@keyframes radio-eq {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); }
}

/* O quadro do player. Absoluto DENTRO da barra de secoes, que e sticky: e a
   barra que carrega ele. Solta no comeco da pagina ele fica logo abaixo do
   menu; depois que a barra gruda no alto, ele gruda junto. Com `fixed` e uma
   distancia escrita na mao ele cobria o proprio menu enquanto a pagina estava
   no topo, porque ali a barra ainda nao subiu. Ver radio_quadro(), em
   includes/layout.php, para o porque de ele morar naquele pedaco do HTML.

   O z-index de 40 e dentro do contexto que a propria barra cria (ela e
   z-index 30), entao ele passa por cima do `::after` da sombra lateral do
   menu e do conteudo da pagina, e nao briga com mais nada. */
.radio__cx {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 24px;
  width: 232px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
  animation: radio-entra 200ms cubic-bezier(.2, .7, .3, 1);
}
.radio__cx[hidden] { display: none; }

@keyframes radio-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* A altura fica reservada antes do iframe chegar, senao o rodape do quadro
   pula para o lugar depois de meio segundo. */
.radio__video {
  aspect-ratio: 16 / 9;
  background: #000;
}
.radio__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.radio__pe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
}
.radio__nome { margin: 0; min-width: 0; flex: 1; line-height: 1.25; }
.radio__nome strong {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O nome do canal fica embaixo e menor: o credito e obrigatorio, o destaque
   nao. A transmissao e da gravadora, nao nossa, e isso precisa estar escrito. */
.radio__nome span {
  display: block;
  margin-top: 1px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.radio__nome a:hover strong { color: var(--ed-noticias); }

.radio__parar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.radio__parar svg { width: 12px; height: 12px; }
.radio__parar:hover {
  border-color: var(--ed-noticias);
  color: var(--ed-noticias);
}

@media (max-width: 700px) {
  /* Na largura do telefone o cabecalho vira duas linhas, e a radio divide a
     de baixo com a busca. So o icone: com o texto, sobrariam menos de 200px
     para o campo de busca. */
  .radio__btn { padding: 10px; gap: 0; }
  .radio__rot { display: none; }
  .radio__cx { right: 12px; width: 196px; top: calc(100% + 8px); }
}

/* ------------------------------------------------ botao de seguir (header) */
/* Ele e irmao da pilula da radio e os dois dividem a terceira coluna do
   cabecalho, entao as medidas sao as dela e nao as do .ig original, que era
   um botao sozinho. Sem isso as duas pilulas ficam de alturas diferentes lado
   a lado, que e o tipo de desalinho que se ve de longe.

   O degrade do Instagram continua so no hover, herdado do .ig: fixo, ele seria
   a coisa mais colorida do cabecalho e roubaria o olho da marca. */
.ig--seguir {
  padding: 8px 16px 8px 13px;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* 15px, o mesmo icone da radio, e nao 17. Com 17 a pilula do seguir
   fechava em 33px de altura contra 31 da radio, e duas pilulas de alturas
   diferentes lado a lado no cabecalho se veem de longe. */
.ig--seguir svg { width: 15px; height: 15px; }

/* A terceira coluna passou a ter dois botoes: radio e seguir, nessa ordem. */
.masthead__lado--d {
  align-items: center;
  gap: 10px;
}

/* O do rodape nao entra nessa: la ele e um botao sozinho, centrado na pilha, e
   fica com o tamanho maior do .ig original. As regras de .ig--rodape ja estao
   la em cima; aqui so se desfaz o encolhimento do cabecalho. */
.ig--rodape.ig--seguir {
  padding: 10px 19px 10px 15px;
  gap: 9px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
.ig--rodape.ig--seguir svg { width: 19px; height: 19px; }

@media (max-width: 700px) {
  /* No telefone os dois viram circulos so com o icone, do mesmo jeito que a
     radio: com os dois rotulos escritos, sobrariam menos de 160px para o campo
     de busca, que divide a linha com eles. */
  .ig--seguir { padding: 10px; gap: 0; }
  .ig--seguir .ig__txt { display: none; }
  .masthead__lado--d { gap: 8px; }
  /* O do rodape continua com texto: la ele tem a linha inteira para ele. */
  .ig--rodape.ig--seguir { padding: 10px 19px 10px 15px; }
  .ig--rodape.ig--seguir .ig__txt { display: inline; }
}