/* ==========================================================================
   STHEFANY — página de imprensa
   imprensa.css · v0.1.0
   --------------------------------------------------------------------------
   Press kit público, e o escopo dele é LANÇAMENTO: disco, single, clipe,
   entrada no artistas. Show contratado NÃO entra — o release da data é
   responsabilidade de quem contrata, e o material de apoio daquela data já
   vive na área do contratante, licenciado para ela.

   Isso muda a hierarquia da página. Se o assunto fosse show, a página seria
   uma listagem: catorze artistas, todos iguais, todos o tempo todo. Como o
   assunto é lançamento, um lançamento por vez ocupa a faixa inteira — quem
   chega no mês de um lançamento está procurando aquele, e não deve ter de
   encontrá-lo numa lista.

   Abaixo do destaque ficam os lançamentos anteriores, em lista de arquivo, e
   o material permanente do artistas: foto, bio e logotipo, que não dependem de
   haver lançamento. É esse último bloco que impede a página de ficar vazia
   entre um lançamento e outro — seção vazia envelhece rápido e trabalha
   contra.

   Continua sendo o subconjunto "divulgar" das três classificações da 0.52.0.
   Nada de produção — rider, mapa de palco e ficha técnica continuam só para
   quem contratou, e o contrato e a nota nem aparecem.

   No material permanente o agrupamento é por ARTISTA, não por tipo de
   arquivo: quem chega está procurando um nome, e agrupar por "fotos" e
   "textos" obrigaria a varrer catorze artistas duas vezes para montar uma
   matéria sobre um. Mesmo raciocínio da 0.51.0 — agrupar pela tarefa de quem
   consulta, não pela origem do arquivo.
   ========================================================================== */

.sp-imprensa { padding-block-end: var(--sp-secao-meia); }

.sp-imprensa__interno {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-8);
}

/* --- aviso de uso ----------------------------------------------------------
   Não é alerta: é a resposta à primeira pergunta de quem baixa um logotipo de
   uma agência. Faixa vermelha aqui daria a ela mais peso que o material que
   ela descreve — mesma correção que a nota de versão do contratante recebeu
   na 0.51.0. */
.sp-imprensa__aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-e-4);
  align-items: start;
  max-width: 78ch;
  padding: var(--sp-e-5);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.6;
}

.sp-imprensa__aviso i {
  font-size: 1.25rem;
  color: var(--sp-acento-texto);
  line-height: 1.3;
}

/* --- grade de artistas -----------------------------------------------------
   `auto-fill`, não `auto-fit`: o artistas tem catorze nomes e vai crescer, então
   a última fileira não pode depender de a conta fechar. Mesma escolha da
   grade do artistas, e o oposto da loja, que tem quatro peças. */
.sp-imprensa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: var(--sp-e-6);
}

.sp-imprensa__artista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-5);
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
}

/* --- abertura da página ----------------------------------------------------
   O texto escrito no editor, no alto da tela. Ele NÃO é o resumo do cartão de
   artista: tem largura de leitura, corpo de texto corrido e a cor de texto
   principal — e não os 5.5rem da coluna da foto, que era onde ele estava
   caindo até a 0.59.5. */

.sp-imprensa__abertura {
  max-width: 60ch;
  margin-block-end: var(--sp-e-7);
  color: var(--sp-tinta-2);
  line-height: var(--sp-lh-corpo);
}

.sp-imprensa__abertura > * + * { margin-block-start: var(--sp-e-4); }

.sp-imprensa__cabecalho {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--sp-e-5);
  align-items: center;
  padding-block-end: var(--sp-e-5);
  border-block-end: 1px solid var(--sp-linha-clara);
}

/* A foto entra colorida, como na página do artista: o preto e branco existe
   para homogeneizar acervo irregular, e aqui quem chega quer ver o artista. */
.sp-imprensa__foto { border-radius: var(--sp-raio); }

.sp-imprensa__nome {
  font-size: var(--sp-t-h3);
  line-height: 1.1;
}

.sp-imprensa__resumo {
  margin-block-start: var(--sp-e-2);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.5;
}

.sp-imprensa__link {
  display: inline-block;
  margin-block-start: var(--sp-e-3);
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-peq);
  font-weight: 500;
}

.sp-imprensa__itens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-2);
}

.sp-subgrupo + .sp-subgrupo { margin-block-start: var(--sp-e-5); }

/* --- material que ainda não existe -----------------------------------------
   Fica na lista, apagado, com a razão escrita no lugar do formato. Sumir faria
   o jornalista achar que o link falhou e mandar a mensagem que esta página
   existe para evitar. É `<span>`, não `<a>`: não há para onde ir, e um link
   que não leva a lugar nenhum é pior que a ausência dele. */
.sp-item-material--fora {
  border-style: dashed;
  color: var(--sp-tinta-2);
  cursor: default;
}

.sp-item-material--fora:hover {
  border-color: var(--sp-linha-clara);
  background: none;
}

/* --- material da agência ---------------------------------------------------
   Comum a todos os artistas, então não se repete dentro de cada bloco. Mesma
   razão pela qual, na área do contratante, logotipo e texto de divulgação
   ficam fora do contrato. */
.sp-imprensa__bloco .sp-titulo { margin-block-end: var(--sp-e-5); }

.sp-imprensa__apoio {
  margin-block: var(--sp-e-3) var(--sp-e-5);
  max-width: 60ch;
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.6;
}

/* Lista de arquivo e cartão de apoio não acompanham a largura da página: em
   84rem uma linha de arquivo vira uma faixa atravessando a tela, com o nome
   de um lado e a seta do outro, longe demais um do outro para se lerem como
   um item só. */
.sp-imprensa__estreito { max-width: 44rem; }

/* --- lançamento em destaque ------------------------------------------------
   Capa quadrada à esquerda, ficha e material à direita. A capa é o único
   lugar da página onde a imagem é grande, e é de propósito: é ela que o
   jornalista reconhece antes de ler o título, e é o arquivo que ele veio
   buscar com mais frequência.

   A ficha usa `<dl>`. São pares nome/valor, e a lista de definição é o que
   faz o leitor de tela ler "Artista: Banda Vida Reluz" em vez de duas frases
   soltas. Ela traz margem da folha do navegador — zerada abaixo, senão abre
   um vão que se lê como desalinhamento. */
.sp-lancamento {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--sp-e-7);
  align-items: start;
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
}

.sp-lancamento__capa .sp-imagem { border-radius: var(--sp-raio); }

.sp-lancamento__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
}

/* Rótulo em caixa alta acima de título é ruído em quase toda seção deste
   site. Aqui ele sobrevive porque nomeia um dado que o título não diz: o
   título é o nome do disco, e "Lançamento" é o que distingue este bloco dos
   anteriores logo abaixo. */
.sp-lancamento__etiqueta {
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sp-lancamento__titulo {
  font-size: var(--sp-t-h3);
  line-height: 1.1;
}

.sp-lancamento__resumo {
  max-width: 62ch;
  color: var(--sp-tinta-2);
  line-height: 1.6;
}

.sp-lancamento__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-e-4) var(--sp-e-5);
  margin: 0;
  padding-block: var(--sp-e-4);
  border-block: 1px solid var(--sp-linha-clara);
}

.sp-lancamento__ficha dt {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 500;
}

.sp-lancamento__ficha dd {
  margin: 0;
  margin-block-start: 2px;
  font-size: var(--sp-t-peq);
  font-weight: 600;
}

/* Streaming por link, não por embutido: um player do Spotify custa perto de
   meio mega e grava cookie, para entregar o que um link entrega. Mesma
   decisão da discografia, na página do artista. */
.sp-lancamento__ouvir {
  display: flex;
  align-items: center;
  gap: var(--sp-e-4);
}

.sp-lancamento__ouvir-rotulo {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 500;
}

.sp-lancamento__ouvir a {
  font-size: 1.375rem;
  color: var(--sp-tinta-2);
  transition: color var(--sp-transicao);
}

.sp-lancamento__ouvir a:hover { color: var(--sp-acento-texto); }

@media (max-width: 60rem) {
  /* Em coluna a capa deixa de ser um bloco de 20rem ao lado do texto e passa
     a limitar a própria largura: esticada na tela toda, ela empurraria a
     ficha e o material para fora da primeira dobra. */
  .sp-lancamento { grid-template-columns: 1fr; }
  .sp-lancamento__capa { max-width: 16rem; }
}

@media (max-width: 40rem) {
  .sp-imprensa__grade { grid-template-columns: 1fr; }

  .sp-imprensa__cabecalho { grid-template-columns: 4rem minmax(0, 1fr); }

  .sp-imprensa__aviso {
    grid-template-columns: 1fr;
    gap: var(--sp-e-3);
  }
}

/* ==========================================================================
   Para imprensa, na página do artista
   --------------------------------------------------------------------------
   O material aberto de um artista mora na página dele, não numa página de
   imprensa separada: o jornalista chega pelo NOME, e mandá-lo sair daqui para
   reencontrar o mesmo nome numa grade de catorze é trabalho que a página já
   podia ter poupado. Mesma lógica de vídeos, agenda e discografia estarem
   aqui.

   Aberto fica o que dá alcance e não tem custo de licença — bio, foto em
   resolução de tela, logotipo. Atrás da credencial fica o pesado e o que tem
   prazo, e é lá que a agência descobre quem é o veículo.

   A seção vem no fim, antes das notícias: quem veio ver o artista não deve
   topar com material de trabalho antes do conteúdo.
   ========================================================================== */

.sp-imprensa-artista {
  padding-block: var(--sp-secao-meia);
}

.sp-imprensa-artista__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--sp-e-8);
  align-items: start;
}

/* `.sp-titulo` não traz margem própria — o espaçamento vem do `gap` do
   container. Margem negativa aqui subia o texto por cima do título. */
.sp-imprensa-artista__texto {
  max-width: 56ch;
  margin-block: var(--sp-e-4) var(--sp-e-5);
  color: var(--sp-tinta-2);
  line-height: 1.6;
}

.sp-imprensa-artista__itens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-2);
  max-width: 44rem;
}

/* O cartão diz o que está do outro lado da porta. Porta fechada sem lista do
   que há dentro é o que faz alguém desistir de bater. */
.sp-imprensa-artista__cartao { position: sticky; top: calc(var(--sp-cabecalho) + var(--sp-e-5)); }

@media (max-width: 64rem) {
  .sp-imprensa-artista__interno { grid-template-columns: 1fr; }
  .sp-imprensa-artista__cartao { position: static; max-width: 34rem; }
}

/* ==========================================================================
   Área de imprensa credenciada
   --------------------------------------------------------------------------
   Cinco telas na mesma página, trocadas por `data-etapa`, na mesma mecânica
   da área do contratante — que agora mora em `css/acesso.css`, porque duas
   páginas a usam.

   A diferença entre as duas áreas está no que vem ANTES do código. O
   contratante já está no contrato: a agência conhece o e-mail dele. Na
   imprensa não há contrato, e por isso existe uma etapa a mais.

   O dado do credenciamento é autodeclarado: ninguém verifica se a rádio
   existe. Isso não o torna inútil, mas define o que ele é — serve para
   registrar e para falar de volta, não para autenticar. Quem quer o release
   raramente mente sobre o veículo.
   ========================================================================== */

/* O formulário de credenciamento não cabe na caixa de 30 rem das outras
   telas: são dez campos, e espremidos em uma coluna eles viram uma rolagem
   que faz a pessoa desistir na metade. */
.sp-acesso__caixa--larga { width: min(46rem, 100%); }

.sp-credencial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-6);
  margin-block-start: var(--sp-e-6);
}

.sp-credencial__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-e-4);
}

.sp-credencial__campos .sp-campo-bloco--largo { grid-column: 1 / -1; }

.sp-credencial__consentimentos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
}

/* Duas caixas, duas finalidades: dar acesso e manter contato. Juntá-las numa
   caixa só é o que a lei chama de consentimento em bloco — e recusar a
   segunda não pode tirar o material, senão ela não era opcional. */
.sp-consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-e-3);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.5;
  cursor: pointer;
}

.sp-consentimento input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.125rem;
  accent-color: var(--sp-acento);
  cursor: pointer;
}

.sp-consentimento:hover { color: var(--sp-tinta); }

.sp-credencial__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-3) var(--sp-e-5);
}

.sp-credencial__nota { color: var(--sp-tinta-2); font-size: var(--sp-t-peq); }

/* --- alternância das cinco telas -------------------------------------------
   Esconder é regra de `acesso.css`; aqui só se reacende a da vez, porque o
   `display` depende do que cada tela é. */
[data-etapa="acesso"]     .sp-etapa--acesso,
[data-etapa="credenciar"] .sp-etapa--credenciar,
[data-etapa="codigo"]     .sp-etapa--codigo,
[data-etapa="analise"]    .sp-etapa--analise { display: grid; }

[data-etapa="painel"] .sp-etapa--painel { display: block; }

/* Quem ainda não entrou não tem nome nem botão de sair no topo. */
[data-etapa="acesso"]     [data-fora-de-acesso],
[data-etapa="credenciar"] [data-fora-de-acesso],
[data-etapa="codigo"]     [data-fora-de-acesso],
[data-etapa="analise"]    [data-fora-de-acesso] { display: none; }

/* --- painel ---------------------------------------------------------------- */

.sp-painel__interno {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-8);
}

.sp-painel__titulo { font-size: var(--sp-t-h2); }

.sp-painel__texto {
  max-width: 62ch;
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-2);
  line-height: 1.6;
}

.sp-painel__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--sp-e-7);
  align-items: start;
}

@media (max-width: 40rem) {
  .sp-credencial__campos { grid-template-columns: 1fr; }
}

/* Cada grupo do credenciamento é um assunto: quem é você, qual é o veículo.
   Dez campos numa lista plana são uma pilha — mesma constatação da 0.52.0
   sobre os nove itens de "Para divulgar" na área do contratante. */
.sp-credencial__grupo { display: flex; flex-direction: column; gap: var(--sp-e-3); }

.sp-painel__topo { max-width: 62ch; }

/* Dentro do painel os títulos nomeiam blocos de uma tela de trabalho, não
   seções de uma página de leitura: em `--sp-t-h2` eles competem com o próprio
   material e "Lançamentos anteriores" quebra em duas linhas ao lado de uma
   lista de três itens. */
.sp-painel .sp-titulo,
.sp-imprensa-artista .sp-titulo { font-size: var(--sp-t-h3); }

/* As regras da sessão mudaram na 0.58.0: o estado global foi para `base.css`,
   o item da gaveta para `gaveta.css` e o cartão de credenciado para
   `componentes.css`. A gaveta existe em TODAS as páginas do site, e uma regra
   dela nesta folha só valeria onde a imprensa é carregada — que é o defeito
   que a regra de propriedade de classe existe para impedir. */

/* ==========================================================================
   Avisar que publiquei
   --------------------------------------------------------------------------
   Mora dentro da área logada, e não no formulário de contato: a pessoa já
   está identificada e não precisa se apresentar, o aviso vira registro
   estruturado em vez de texto que alguém teria de transcrever, e ela vê as
   próprias publicações logo abaixo — que é o retorno que faz alguém avisar
   uma segunda vez.

   Quatro campos, e nenhum a mais. Cada campo derruba a taxa de resposta, e
   este é o único indicador de RESULTADO do painel inteiro: o resto mede quem
   pegou o material, não quem o usou.
   ========================================================================== */

.sp-bloco-claro {
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
}

.sp-bloco-claro .sp-titulo { font-size: var(--sp-t-h3); }

.sp-aviso {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-5);
}

.sp-aviso__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--sp-e-4);
}

.sp-aviso__campos .sp-campo-bloco--largo { grid-column: 1 / -1; }

/* O "sobre o quê" é um `select` agrupado por artista, não um palpite com
   "não é este?". A lista completa custa um clique e evita que quem publicou
   sobre outro artista tenha de descobrir como corrigir. O `optgroup` é o que
   torna catorze artistas navegáveis: acha-se o nome primeiro, o lançamento
   depois. */
.sp-aviso .sp-botao { align-self: flex-start; }

/* --- o que você já avisou --------------------------------------------------
   Sem retorno visível o veículo avisa uma vez e para: entregou a informação e
   não viu acontecer nada. */

.sp-aviso__lista {
  margin-block-start: var(--sp-e-6);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
}

.sp-publicacoes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-publicacao {
  padding-block-end: var(--sp-e-3);
  border-block-end: 1px solid var(--sp-linha-clara);
}
.sp-publicacao:last-child { padding-block-end: 0; border-block-end: 0; }

.sp-publicacao__titulo { font-size: var(--sp-t-peq); font-weight: 600; }

.sp-publicacao__meta {
  margin-block-start: 2px;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

/* O estado responde "e daí?": a pessoa avisou e quer saber se serviu. */
.sp-publicacao__estado { color: var(--sp-acento-texto); font-weight: 500; }

/* ==========================================================================
   A área de imprensa DE QUEM AINDA NÃO É CREDENCIADO
   --------------------------------------------------------------------------
   Duas telas na caixa escura do acesso: quem está esperando decisão e quem foi
   recusado. Elas entraram na 0.52.0, junto com o processo de quatro etapas do
   núcleo 1.36.0.

   O `.sp-acesso` inteiro é de `acesso.css`, que esta página já enfileira. Aqui
   só entra o que é desta tela.
   ========================================================================== */

/* --- a pergunta pendente, e o motivo da recusa -----------------------------
   O MESMO componente para as duas coisas, de propósito: nos dois casos é a
   agência falando com a pessoa dentro da tela, e é a única coisa da tela que
   pede resposta. Dois desenhos diferentes para a mesma função fariam a segunda
   parecer outra coisa.

   Ele é a única caixa clara dentro da caixa escura do acesso. Não é enfeite: é
   o que separa "o que aconteceu" — que se lê — de "o que esperam de você" —
   que se responde. */
.sp-acesso__pendencia {
  margin-block-start: var(--sp-e-6);
  padding: var(--sp-e-5);
  border-radius: var(--sp-raio-peq);
  background: rgba(255, 255, 255, .07);
  border-inline-start: 3px solid var(--sp-acento);
  text-align: start;
}

.sp-acesso__pendencia-rotulo {
  font-size: var(--sp-t-mini);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-acento-texto, var(--sp-acento));
}

.sp-acesso__pendencia-texto {
  margin-block: var(--sp-e-2) var(--sp-e-4);
  line-height: 1.5;
}

/* O `min-height: 9rem` de `componentes.css` foi medido para o formulário de
   contratação, que pede um parágrafo. Aqui a resposta é uma linha ou um link, e
   nove rem de campo vazio dentro de uma caixa curta pedem mais do que a
   pergunta pediu. */
.sp-acesso__pendencia .sp-campo-bloco textarea { min-height: 5.5rem; }

.sp-acesso__pendencia .sp-botao { margin-block-start: var(--sp-e-3); }

/* --- a trilha do pedido ----------------------------------------------------
   Reaproveita `.sp-novidades`, que mora em `componentes.css` desde a 0.52.0 —
   ele saiu de `contratante.css` exatamente porque esta tela passou a usá-lo, e
   esta página não enfileira aquela folha.

   **Ela não existe para quem já está credenciado.** As etapas contam o PEDIDO,
   e o pedido acaba quando a decisão sai — por isso ela mora nesta tela e não no
   painel de material. */
.sp-acesso__trilha {
  margin-block-start: var(--sp-e-6);
  text-align: start;
}

/* O `sticky` de `componentes.css` não tem sentido aqui: o bloco está dentro de
   uma caixa centrada e curta, e grudar no topo não gruda em nada. */
.sp-acesso__trilha { position: static; }

/* Sem link, sem cursor de link. Na área do contratante cada item aponta para um
   show; aqui não há para onde ir. */
.sp-acesso__trilha .sp-novidade { cursor: default; }


/* ==========================================================================
   A SALA DE IMPRENSA — o painel de quem já está credenciado
   0.68.0 · portado do protótipo 0.101.0
   --------------------------------------------------------------------------
   Substitui o painel-catálogo: nove listas de arquivos empilhadas com o mesmo
   peso. O retorno do cliente foi "está longo, muita informação e não tem nada
   ao mesmo tempo", e a causa era de MODELO e não de arranjo — o material do
   artista já vive na página dele, e ter as duas coisas criava duas verdades
   para manter.

   A tela virou ORIENTAÇÃO: onde ir, o que mudou, o que tem prazo, o que está
   perto. Tem mais blocos e cansa menos, porque lista de arquivo exige
   varredura e orientação se lê de relance.
   ========================================================================== */

.sp-painel__interno {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-8);
}

/* --- as duas colunas -------------------------------------------------------
   A lateral existe porque novidade e elenco disputavam o mesmo topo:
   empilhados, um obrigava a rolar por cima do outro todos os dias. */

.sp-painel__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--sp-e-8);
  align-items: start;
}

.sp-painel__principal,
.sp-painel__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-8);
  min-width: 0;
}

.sp-painel__lateral { gap: var(--sp-e-6); }

/* `.sp-novidades` nasce `position: sticky` — faz sentido onde ela é o único
   bloco da coluna, que é o caso da tela onde o componente nasceu. Aqui ela tem
   cinco gavetas abaixo, e sticky não empurra o que vem depois: ao descolar, o
   cartão desliza POR CIMA da primeira gaveta.

   Grudar a coluna inteira também não serve: com novidades mais cinco gavetas
   ela é mais alta que a janela, e o fim dela nunca apareceria. */
.sp-painel__lateral .sp-novidades { position: static; }

/* No celular a lateral desce inteira. A ordem do HTML já é a certa — principal
   antes de lateral —, então não há `order` nenhum aqui: credenciamento tem
   prazo, novidade não, e prazo vem antes de atualização. */
@media (max-width: 62rem) {
  .sp-painel__grade { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-7); }
}


/* --- boas-vindas -----------------------------------------------------------
   Preto com as luzes vermelhas, e não o vinho chapado. Duas razões: é a mesma
   superfície da fotografia e do topo do site, então a faixa lê como parte da
   casa em vez de cartão avulso; e a peça do banner logo abaixo é escura, então
   o vinho sólido criava um degrau de cor entre dois blocos que ocupam a mesma
   largura e deveriam conversar.

   `.sp-escuro` traz o recuo dos blocos que sangram até a janela. Aqui ele
   deixava a faixa mais estreita que o banner ao lado — dois irmãos com
   larguras diferentes por acidente de herança. Zerado. */

.sp-boas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: var(--sp-e-7);
  border-radius: var(--sp-raio-cartao);
  background: var(--sp-fundo);
}

.sp-boas::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(60% 70% at 22% 8%, rgba(224, 27, 23, .38), transparent 62%),
    radial-gradient(70% 80% at 82% 26%, rgba(142, 35, 28, .55), transparent 68%),
    radial-gradient(90% 60% at 50% 108%, rgba(11, 5, 5, .96), transparent 70%),
    linear-gradient(168deg, #2A100D 0%, #120707 58%, #0B0505 100%);
}

/* O rótulo NÃO usa o acento claro, embora a superfície seja escura. Ele cai
   exatamente sob a luz quente do canto superior esquerdo, onde o fundo efetivo
   fica perto de #6F1411 — e ali o acento claro dá 3,10, abaixo dos 4,5 que
   texto pequeno exige. Este tom dá 8,61 no mesmo ponto.

   A regra que fica: sobre fundo em degradê, o contraste se mede no ponto MAIS
   CLARO do degradê, e não na cor de base declarada. */
.sp-boas__rotulo {
  font-size: var(--sp-t-mini);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #F6D5D2;
}

.sp-boas__titulo {
  margin-block-start: var(--sp-e-2);
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h2);
  line-height: var(--sp-lh-titulo);
}

.sp-boas__texto {
  max-width: 60ch;
  margin-block-start: var(--sp-e-4);
  line-height: var(--sp-lh-corpo);
}

.sp-boas__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-e-2);
  margin-block-start: var(--sp-e-5);
  font-size: var(--sp-t-mini);
  color: var(--sp-texto-3);
}
.sp-boas__meta .sp-i { width: 1em; height: 1em; }


/* --- busca -----------------------------------------------------------------
   Acima do carrossel: quem chega com um nome na cabeça não deveria passar por
   uma vitrine antes. */

.sp-busca-imprensa {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
}
.sp-busca-imprensa .sp-campo { flex: 1 1 18rem; }
.sp-busca-imprensa .sp-campo .sp-i { color: var(--sp-tinta-3); }


/* --- elenco dentro do painel -----------------------------------------------
   O componente da home sem o respiro de seção de página inteira: aqui ele é um
   bloco entre outros, e o `--sp-secao` dele abriria um vão no meio da coluna. */

/* `.sp-elenco` e `.sp-perto` são os invólucros de seção. Elas não ganham
   respiro próprio: quem separa bloco de bloco aqui é o `gap` da coluna, e
   margem somada a ele abre um vão que não existe entre os outros. `min-width:
   0` é o que impede o carrossel de esticar a coluna do grid — sem ele, o
   trilho passa a medir pelo conteúdo e a lateral encolhe até sumir. */
.sp-elenco,
.sp-perto { min-width: 0; }

.sp-elenco--imprensa { padding-block: 0; }

.sp-elenco__carrossel { min-width: 0; }

/* O painel da imprensa não herda o fundo do painel do contratante: aqui o que
   dá superfície é cada bloco, e um fundo no invólucro brigaria com a faixa
   escura de boas-vindas logo no topo. */
.sp-painel--imprensa { background: none; }

.sp-elenco__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-e-4);
  margin-block-end: var(--sp-e-5);
}

/* O véu das pontas. O trilho cortava o cartão seguinte numa linha reta, e a
   borda dura fazia parecer conteúdo quebrado em vez de lista que continua.

   Só existe do lado onde HÁ para onde ir: as duas pontas leem o `disabled` que
   o `carrossel.js` já escreve nas setas. Esfumaçar uma ponta que acabou seria
   apagar o último cartão por nada.

   Escopado à sala de imprensa de propósito — o carrossel da home é o mesmo
   componente e não foi pedido. */
.sp-elenco--imprensa .sp-carrossel__trilho {
  --veu-esq: 0px;
  --veu-dir: 0px;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--veu-esq),
    #000 calc(100% - var(--veu-dir)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--veu-esq),
    #000 calc(100% - var(--veu-dir)), transparent 100%);
}

.sp-elenco--imprensa .sp-carrossel:has([data-anterior]:not(:disabled)) .sp-carrossel__trilho { --veu-esq: 3rem; }
.sp-elenco--imprensa .sp-carrossel:has([data-proximo]:not(:disabled))  .sp-carrossel__trilho { --veu-dir: 5rem; }

/* O encaixe do cartão é escopado em `.sp-artistas` no `artistas.css`, e aqui o
   invólucro é outro. Sem esta linha o trilho rola livre e para no meio de um
   cartão — o carrossel da home encaixa e este não, pela mesma folha. */
.sp-elenco--imprensa .sp-carrossel__trilho > .sp-artista { scroll-snap-align: start; }


/* --- credenciamento --------------------------------------------------------
   Reusa `.sp-data` da agenda: data à esquerda, o que é no meio, ação à direita.
   Não é economia de CSS — uma lista de shows já tem um desenho neste projeto, e
   inventar um segundo faria a mesma pessoa aprender duas vezes a mesma coisa.

   O que muda no modificador: a linha não é um link (a ação mora no botão ou o
   estado mora no selo), então o realce de hover sai — realce sob o ponteiro
   numa linha que não clica promete algo que não acontece. */

/* Sem margem própria: `.sp-painel__principal` é um flex em coluna com gap, e
   qualquer margem aqui se soma a ele e abre um vão que não existe entre os
   outros blocos. */
.sp-cred .sp-titulo { margin-block-end: var(--sp-e-2); }

.sp-cred__lista {
  margin: var(--sp-e-6) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--sp-linha-clara);
}

/* Estado sem nenhum show aberto. Peso baixo de propósito: é uma resposta, não
   um anúncio. Com moldura e ícone viraria cartão de erro para uma situação que
   é normal na maior parte do ano. */
.sp-cred__vazio {
  margin-block-start: var(--sp-e-5);
  max-width: 44rem;
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: var(--sp-lh-corpo);
}

.sp-data--cred { align-items: start; }
.sp-data--cred::before { content: none; }
.sp-data--cred .sp-data__quando { padding-block-start: var(--sp-e-1); }

.sp-cred__corpo { min-width: 0; }

.sp-cred__acao { display: flex; justify-content: flex-end; }

/* `__aviso` é o que a pessoa precisa fazer ou saber para agir — onde retirar,
   que ali não tem crachá. `__nota` é a assinatura da linha: quem responde e até
   quando. Dois pesos porque respondem perguntas diferentes; um só faria a
   segunda desaparecer dentro da primeira. */
.sp-cred__aviso {
  margin-block-start: var(--sp-e-3);
  max-width: 42rem;
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: var(--sp-lh-corpo);
}

.sp-cred__nota {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}
.sp-cred__nota b { color: var(--sp-tinta-2); font-weight: 600; }

/* No celular a ação cai para baixo do texto, na coluna 2, como o selo já faz em
   `.sp-data`. A terceira coluna espremida daria um botão de duas linhas ao lado
   de um título de três. */
@media (max-width: 48rem) {
  .sp-data--cred { grid-template-columns: auto 1fr; }
  .sp-cred__acao { grid-column: 2; justify-content: flex-start; margin-block-start: var(--sp-e-4); }
}


/* --- próximos shows perto --------------------------------------------------
   Deliberadamente mais seco que o credenciamento acima: sem data em corpo
   grande, sem botão, sem selo. Se as duas listas parecessem irmãs, a pessoa
   concluiria que todo show daqui aceita pedido de credencial — e a maioria não
   aceita. */

.sp-perto__lista {
  margin: var(--sp-e-5) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--sp-linha-clara);
}

.sp-perto__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--sp-e-4);
  align-items: center;
  padding-block: var(--sp-e-4);
  border-block-end: 1px solid var(--sp-linha-clara);
  color: inherit;
  text-decoration: none;
}

.sp-perto__quando {
  font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-peq);
  font-weight: 600;
  color: var(--sp-acento-texto);
}

.sp-perto__oque { min-width: 0; }

.sp-perto__nome { display: block; font-weight: 600; font-size: var(--sp-t-peq); }
.sp-perto__onde { display: block; color: var(--sp-tinta-3); font-size: var(--sp-t-mini); }

.sp-perto__item .sp-i { width: 1rem; height: 1rem; color: var(--sp-tinta-3); }

@media (hover: hover) and (pointer: fine) {
  .sp-perto__item:hover .sp-perto__nome { color: var(--sp-acento-texto); }
}

.sp-perto__rodape { margin-block-start: var(--sp-e-4); font-size: var(--sp-t-peq); }


/* --- as gavetas da lateral -------------------------------------------------
   Recolhido não é escondido. A diferença é a frequência: nenhuma destas é o
   motivo de alguém abrir a página, e todas são o motivo de alguém voltar a ela
   uma vez ou outra. */

.sp-gavetas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-3);
}

.sp-gavetas .sp-imprensa__apoio { margin-block-end: var(--sp-e-4); }
.sp-gavetas .sp-botao { width: 100%; justify-content: center; }

/* O recibo do que foi baixado. Reusa o histórico da área do contratante, que é
   o mesmo desenho para a mesma coisa: uma linha por evento, com a data à
   direita em tom secundário. */
.sp-gavetas .sp-historico { margin: 0; padding: 0; list-style: none; }

.sp-historico__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-e-2);
  padding-block: var(--sp-e-3);
  border-block-end: 1px solid var(--sp-linha-clara);
  font-size: var(--sp-t-peq);
}
.sp-historico__linha:last-child { border-block-end: 0; padding-block-end: 0; }


/* --- dúvidas frequentes --------------------------------------------------- */

.sp-duvidas {
  margin: 0;
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: var(--sp-lh-corpo);
}


/* ==========================================================================
   AVISAR QUE PUBLIQUEI — formulário e o que a pessoa já enviou
   0.73.0
   --------------------------------------------------------------------------
   Fecha o laço do credenciamento: todo o resto do site mede quem PEGOU o
   material, e só isto prova que alguém publicou.
   ========================================================================== */

.sp-aviso__campos {
  display: grid;
  gap: var(--sp-e-4);
  margin-block-end: var(--sp-e-5);
}

.sp-aviso .sp-botao { width: 100%; justify-content: center; }

.sp-campo-bloco { display: flex; flex-direction: column; gap: var(--sp-e-2); }

.sp-campo-bloco__rotulo { font-size: var(--sp-t-mini); font-weight: 600; }

.sp-campo-bloco__ajuda {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  line-height: var(--sp-lh-corpo);
}

/* A múltipla escolha mostra QUATRO linhas e não uma.
   ---------------------------------------------------------------------------
   Um `select multiple` de uma linha parece um seletor comum, e quem vê clica
   uma vez, escolhe um artista e vai embora sem saber que podia escolher dois.
   A altura é o que anuncia a multiplicidade — mais barato e mais honesto que
   uma frase explicando. */
.sp-campo-bloco select[multiple] {
  padding: var(--sp-e-2);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--sp-raio-peq);
  background: transparent;
  color: inherit;
  font: inherit;
}

/* --- o que já foi enviado -------------------------------------------------- */

.sp-publicacoes { margin-block-start: var(--sp-e-6); }

.sp-publicacoes__titulo {
  margin: 0 0 var(--sp-e-3);
  font-size: var(--sp-t-peq);
  font-weight: 700;
}

.sp-publicacoes__lista { margin: 0; padding: 0; list-style: none; }

.sp-publicacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-2) var(--sp-e-3);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--sp-e-3);
  border-block-end: 1px solid var(--sp-linha-clara);
}
.sp-publicacao:last-child { border-block-end: 0; }

.sp-publicacao__meta { min-width: 0; }

.sp-publicacao__titulo {
  display: block;
  color: inherit;
  font-size: var(--sp-t-peq);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sp-publicacao__quando { color: var(--sp-tinta-3); font-size: var(--sp-t-mini); }

/* O SELO DIZ O ESTADO, e é ele que transforma silêncio em espera. Sem o selo,
   quem acabou de enviar não vê diferença entre "chegou" e "sumiu" — e a reação
   óbvia é enviar de novo. */
.sp-publicacao__estado[data-tom="atento"] {
  background: rgba(192, 114, 0, .14);
  color: #8A5100;
}