/* ==========================================================================
   STHEFANY — componentes
   componentes.css · v0.8.0
   --------------------------------------------------------------------------
   Componentes que o protótipo e o design system compartilham. No plugin cada
   bloco vira um arquivo próprio, declarado em get_style_depends() do widget
   que o usa, para o Elementor só carregar onde há uso.
   ========================================================================== */

/* --- tratamento de foto -------------------------------------------------
   Preto e branco por padrão, cor no hover. A regra vive dentro de
   @media (hover: hover): no toque não existe hover e a foto ficaria
   dessaturada para sempre — que é o defeito clássico deste efeito.
   No celular a foto entra colorida direto. */

.sp-imagem {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sp-fundo-alto);
}

.sp-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .sp-imagem--pb img,
  .sp-imagem--pb .sp-foto--simulada {
    filter: grayscale(1) contrast(1.08);
    transition: filter var(--sp-transicao-foto),
                transform var(--sp-transicao-foto);
  }

  .sp-imagem--pb:hover img,
  .sp-imagem--pb:hover .sp-foto--simulada,
  .sp-imagem--pb:focus-visible img,
  .sp-imagem--pb:focus-visible .sp-foto--simulada {
    filter: grayscale(0) contrast(1);
  }
}

/* Véu de baixo, para o texto sobre a foto ter contraste garantido sem
   depender do que a fotografia tem naquele canto. */
.sp-imagem--veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(11, 5, 5, .92) 0%,
              rgba(11, 5, 5, .45) 38%,
              transparent 72%);
}

.sp-proporcao--retrato  { aspect-ratio: 3 / 4; }
.sp-proporcao--quadrado { aspect-ratio: 1 / 1; }
.sp-proporcao--paisagem { aspect-ratio: 16 / 9; }
.sp-proporcao--palco    { aspect-ratio: 4 / 5; }

/* --- cartão de artista --------------------------------------------------
   Sem caixa, sem borda, sem sombra: a foto é o cartão. Catorze cartões com
   moldura viram planilha; catorze fotos viram artistas. */

/* O cartão é uma superfície escura própria: a foto ocupa tudo e o nome fica
   sobre o véu. Herdar a cor da página branca deixaria o nome preto sobre foto
   preta — que foi o defeito da primeira montagem da grade. */
.sp-artista {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--sp-texto);
  --sp-tinta:   var(--sp-texto);
  --sp-tinta-2: var(--sp-texto-2);
  --sp-tinta-3: var(--sp-texto-3);
}

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

.sp-artista__texto {
  position: absolute;
  inset-inline: var(--sp-e-4);
  bottom: var(--sp-e-4);
  z-index: 2;
}

.sp-artista__nome {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

.sp-artista__genero {
  margin-block-start: var(--sp-e-1);
  color: var(--sp-texto-2);
  font-size: var(--sp-t-peq);
}

/* Fio que cresce sob o nome no hover. Substitui a seta apensa ao texto,
   que é o tique visual mais gasto deste tipo de cartão. */
.sp-artista__nome::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-block-start: var(--sp-e-2);
  background: var(--sp-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sp-transicao);
}
.sp-artista:hover .sp-artista__nome::after,
.sp-artista:focus-visible .sp-artista__nome::after { transform: scaleX(1); }

/* --- item de agenda -----------------------------------------------------
   A data é o dado que a pessoa procura primeiro, então ela é o elemento
   tipográfico dominante da linha, não um rótulo pequeno ao lado. */

.sp-data {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-e-5);
  align-items: center;
  padding-block: var(--sp-e-5);
  border-block-end: 1px solid var(--sp-linha-clara);
  text-decoration: none;
  color: inherit;
}

/* O realce sangra para fora da coluna de texto.

   Pintado no fundo do próprio elemento ele nascia rente ao dígito da esquerda
   e ao botão da direita, sem folga e sem canto: o "11" parecia cortado pela
   borda e a linha inteira lia como célula de planilha selecionada, não como
   item de lista sob o ponteiro.

   A régua inferior continua onde estava, alinhada à grade do resto da página
   — quem sangra é só o realce, num pseudo-elemento. `inset-block: 0 1px`
   deixa a régua aparecer por baixo dele; `isolation: isolate` prende o
   `z-index: -1` dentro da linha, senão o realce escorregaria para trás do
   fundo da página. */
.sp-data::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0 1px;
  inset-inline: calc(var(--sp-e-5) * -1);
  border-radius: var(--sp-raio);
  background: color-mix(in srgb, currentColor 5%, transparent);
  opacity: 0;
  transition: opacity var(--sp-transicao);
}

@media (hover: hover) and (pointer: fine) {
  .sp-data:hover::before { opacity: 1; }
}

.sp-data__quando {
  display: flex;
  align-items: baseline;
  gap: var(--sp-e-2);
  min-width: 6.5rem;
  font-family: var(--sp-fonte-titulo);
  font-variant-numeric: tabular-nums;
}

.sp-data__dia {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: .85;
  color: var(--sp-acento-texto);
}

.sp-data__mes {
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-peq);
  font-weight: 500;
  color: var(--sp-tinta-3);
}

.sp-data__artista {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.1;
}

.sp-data__local {
  margin-block-start: var(--sp-e-1);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

/* Show que já aconteceu é o estado apagado da lista — mas apagar com
   `opacity` derruba TUDO junto, texto incluído: a .42 de antes deixava a
   linha inteira abaixo de 2:1 e o filtro "Passados" entregava uma tela que
   não dá para ler. O apagamento agora é de cor, um degrau abaixo da tinta
   normal, e de saturação na fotografia. Continua nitidamente secundário e
   continua legível. */
.sp-data--passado {
  --sp-tinta:   var(--sp-tinta-2);
  --sp-tinta-2: var(--sp-tinta-3);
  color: var(--sp-tinta-2);
}
.sp-data--passado .sp-imagem img,
.sp-data--passado .sp-foto--simulada { filter: grayscale(1) opacity(.55); }
.sp-data--passado .sp-data__dia { color: var(--sp-tinta-2); }

.sp-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-1);
  padding: var(--sp-e-1) var(--sp-e-3);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-botao);
  font-size: var(--sp-t-mini);
  font-weight: 500;
  color: var(--sp-tinta-2);
  white-space: nowrap;
}
.sp-selo--vinho {
  border-color: transparent;
  background: var(--sp-vinho-fundo);
  color: #F6D5D2;
}

@media (max-width: 48rem) {
  .sp-data { grid-template-columns: auto 1fr; gap: var(--sp-e-4); }
  .sp-data > .sp-selo { grid-column: 2; justify-self: start; }
  .sp-data__dia { font-size: 2rem; }
}

/* --- rótulo ---------------------------------------------------------------
   Só onde nomeia um dado que o título não diz, como a etiqueta do painel do
   próximo show. Não vai acima de título de seção: ali o título já nomeia, e o
   rótulo vira ruído. Sem seta: ela era ornamento do kit, não informação. */

.sp-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-3);
  margin-block-end: var(--sp-e-4);
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-mini);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sp-acento-texto);
}

.sp-rotulo--claro { color: var(--sp-vinho); }

/* --- mídia: foto ou vídeo -------------------------------------------------
   O mesmo espaço aceita imagem ou vídeo. O vídeo é decoração, nunca conteúdo:
   sem som, sem controles, em laço curto, e sempre com poster — se ele não
   carregar, o quadro fica com a foto no lugar de um buraco preto.

   Ele não toca sozinho o tempo todo: o script só dá play quando o bloco está
   visível, e nem chega a baixar quando o visitante pediu menos movimento ou
   está no modo de economia de dados. */

.sp-midia > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Enquanto o vídeo não está pronto, o poster já ocupa o quadro; a transição
   evita o pulo de brilho entre o poster e o primeiro quadro. */
.sp-midia > video {
  opacity: 0;
  transition: opacity 400ms linear;
}
.sp-midia > video[data-pronto="sim"] { opacity: 1; }

.sp-midia__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O vídeo só ocupa o quadro quando a mídia está em modo vídeo. Em modo foto
   ele nem é observado — o script ignora elemento sem caixa. */
.sp-midia[data-midia="foto"] > video { display: none; }

/* --- campo de formulário ---------------------------------------------------
   Um campo só, colado ao botão, no formato do kit. Herda a superfície: dentro
   de bloco escuro o contorno vem de `currentColor`, então não há variante. */

.sp-campo {
  display: flex;
  align-items: center;
  gap: var(--sp-e-2);
  width: min(28rem, 100%);
  padding: 5px 5px 5px var(--sp-e-5);
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: var(--sp-raio-botao);
  transition: border-color var(--sp-transicao);
}
.sp-campo:focus-within { border-color: currentColor; }

.sp-campo input {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--sp-e-3);
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-peq);
}
.sp-campo input::placeholder { color: var(--sp-tinta-3); }
.sp-campo input:focus { outline: none; }

.sp-campo .sp-botao { flex: 0 0 auto; }

/* --- título de seção --------------------------------------------------------
   Um só, em componentes, porque toda seção tem um. Antes cada seção definia o
   seu (`.sp-artistas__titulo`, `.sp-shows__titulo`, `.sp-videos__titulo`), e usar
   o título de uma seção em outra página exigia carregar o CSS dela inteiro —
   quando isso não acontecia, o título perdia o estilo. */

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

/* --- migalha ---------------------------------------------------------------
   O caminho de volta no topo das páginas internas. */

.sp-migalha {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
  margin-block-end: var(--sp-e-4);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  transition: color var(--sp-transicao), gap var(--sp-transicao);
}
.sp-migalha:hover { color: var(--sp-tinta); gap: var(--sp-e-3); }

/* --- cartão de apoio --------------------------------------------------------
   Caixa contornada com título, texto e ação. Aparece ao lado do conteúdo
   principal em mais de uma página — na do show apresenta o artista, na do post
   chama para a contratação. Por isso mora aqui, e não no CSS de uma delas. */

.sp-cartao {
  display: grid;
  gap: var(--sp-e-4);
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-bloco);
}

.sp-cartao__foto {
  border-radius: var(--sp-raio-peq);
  aspect-ratio: 16 / 10;
}

.sp-cartao__titulo {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.15;
}

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

.sp-cartao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
}
.sp-cartao__acoes .sp-botao { flex: 1 1 auto; justify-content: center; }

/* --- carrossel --------------------------------------------------------------
   A casca do carrossel: topo com setas e trilho com encaixe. Usada por seis
   seções — agenda, artistas, vídeos, discografia, fotos e notícias — então
   mora aqui. Enquanto vivia em `shows.css`, qualquer página que usasse
   carrossel sem carregar aquele arquivo perdia as setas e a rolagem.

   Cada seção define a largura da célula pelo `grid-auto-columns` próprio.
   ========================================================================== */

.sp-shows[data-exibicao="carrossel"] .sp-shows__foto,
.sp-shows[data-exibicao="carrossel"] .sp-shows__lista { display: none; }

.sp-shows[data-exibicao="lista"] .sp-carrossel { display: none; }

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

.sp-carrossel__setas { display: flex; gap: var(--sp-e-2); }

/* O `hidden` do HTML só define `display: none` na folha do navegador, que
   perde para qualquer `display` declarado em seletor de classe. Sem esta
   linha, o par de setas continua visível quando o script o esconde. */
.sp-carrossel__setas[hidden] { display: none; }

/* No toque a seta não serve para nada: o dedo arrasta o trilho direto, e a
   fração de célula que sobra na borda já avisa que há mais coisa. O par ocupa
   5,5 rem de uma tela de 360 px e, sem ponteiro, nunca recebe hover — fica
   como enfeite que rouba espaço do título da seção.

   Vale para todos os carrosséis do site: artistas, agenda, vídeos, discografia,
   fotos, loja e notícias. O script continua rodando e as setas voltam sozinhas
   se a janela crescer. */
@media (hover: none), (pointer: coarse) {
  .sp-carrossel__setas { display: none; }
}

.sp-seta {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-botao);
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 0;
  cursor: pointer;
  transition: border-color var(--sp-transicao), background var(--sp-transicao),
              opacity var(--sp-transicao);
}
.sp-seta:hover { border-color: currentColor; }
.sp-seta[disabled] { opacity: .3; cursor: default; }
.sp-seta[disabled]:hover { border-color: var(--sp-linha-clara); }

/* A largura da célula é calculada a partir de quantas devem caber na tela,
   e não por `minmax`. Com `minmax` as células encolhem para caber e o trilho
   nunca estoura a largura — ou seja, nunca rola.

   `--sp-visiveis` aceita fração de propósito: 4,3 mostra quatro inteiras e um
   pedaço da quinta, que é o que avisa que existe mais coisa. Cada seção
   sobrescreve esse número; ninguém mexe no cálculo. */
.sp-carrossel__trilho {
  --sp-vao: var(--sp-e-4);
  --sp-visiveis: 4.3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--sp-visiveis) - 1) * var(--sp-vao)) / var(--sp-visiveis)
  );
  gap: var(--sp-vao);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* A sombra do card e o foco não podem ser cortados pelo overflow. */
  padding-block: 2px;
  margin-inline: -2px;
  padding-inline: 2px;
}
.sp-carrossel__trilho::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sp-carrossel__trilho { scroll-behavior: auto; }
}


/* --- estado vazio ------------------------------------------------------------
   Tela vazia é convite para agir, não aviso de erro: diz o que aconteceu e
   oferece a saída. Mesma lógica da 404.

   Toda página de arquivo filtra por GET, e toda combinação de filtros pode
   chegar a zero. A contagem dentro de cada ficha evita a maior parte dessas
   viagens, mas não cobre link antigo nem URL montada na mão.

   A seção declara `data-estado`. Em `vazio` a lista some e este bloco aparece
   — mesmo mecanismo de `data-exibicao`. No Elementor isto NÃO vira controle:
   quem decide é a consulta do WordPress, no `else` do loop.

   Estava em arquivo.css e foi promovido para cá quando passou a ser usado
   também pela documentação, que não carrega aquele arquivo.
   ========================================================================== */

.sp-vazio {
  display: none;
  justify-items: start;
  gap: var(--sp-e-4);
  padding-block: var(--sp-e-9);
  max-width: 46ch;
}

[data-estado="vazio"] .sp-vazio { display: grid; }

[data-estado="vazio"] .sp-artistas__grade,
[data-estado="vazio"] .sp-loja__grade,
[data-estado="vazio"] .sp-blog__grade,
[data-estado="vazio"] .sp-fotos__grade,
[data-estado="vazio"] .sp-shows__lista,
[data-estado="vazio"] .sp-carrossel { display: none; }

.sp-vazio i { font-size: 2rem; color: var(--sp-tinta-3); }

.sp-vazio__titulo {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
}

.sp-vazio__texto { color: var(--sp-tinta-2); }

.sp-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
}

/* --- selo: estados do show ---------------------------------------------------
   Confirmado é o estado silencioso: cinco selos iguais em sequência viram
   textura, não informação. Os estados abaixo existem porque mudam o que a
   pessoa faz a seguir — comprar, esperar aviso ou parar de esperar.

   Adiado e cancelado não somem da agenda: quem viu a data precisa encontrar o
   aviso onde procurou a data. */

.sp-selo--esgotado {
  border-color: color-mix(in srgb, var(--sp-tinta) 24%, transparent);
  color: var(--sp-tinta-2);
}

.sp-selo--adiado {
  border-color: color-mix(in srgb, var(--sp-acento) 46%, transparent);
  color: var(--sp-acento-texto);
}

.sp-selo--cancelado {
  border-color: color-mix(in srgb, var(--sp-tinta) 24%, transparent);
  color: var(--sp-tinta-3);
  text-decoration: line-through;
}

/* ==========================================================================
   Campo de formulário
   --------------------------------------------------------------------------
   Estava em `contato.css`, mas a área do contratante também usa — e ela não
   carrega aquela folha, porque não tem nada a ver com a página de contato.
   Componente usado por duas páginas mora aqui, mesma regra do carrossel.
   ========================================================================== */

.sp-campo-bloco { display: grid; gap: var(--sp-e-2); }
.sp-campo-bloco--largo { grid-column: 1 / -1; }

.sp-campo-bloco__rotulo {
  font-size: var(--sp-t-peq);
  font-weight: 600;
}
.sp-campo-bloco__rotulo span { color: var(--sp-acento-texto); }

/* Um controle só para entrada, seleção e área de texto: o desenho é o mesmo e
   separar em três regras é onde a diferença começa a aparecer sozinha. */
.sp-campo-bloco input,
.sp-campo-bloco select,
.sp-campo-bloco textarea {
  width: 100%;
  padding: var(--sp-e-4);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--sp-raio);
  background: transparent;
  color: inherit;
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-peq);
  transition: border-color var(--sp-transicao);
}
.sp-campo-bloco textarea { min-height: 9rem; resize: vertical; }

.sp-campo-bloco input::placeholder,
.sp-campo-bloco textarea::placeholder { color: var(--sp-tinta-3); }

.sp-campo-bloco input:focus,
.sp-campo-bloco select:focus,
.sp-campo-bloco textarea:focus {
  outline: none;
  border-color: var(--sp-acento);
}

/* A seta do `select` é do navegador e some no fundo escuro. */
.sp-campo-bloco select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--sp-e-8);
}
.sp-campo-bloco select option { background: var(--sp-fundo); color: var(--sp-texto); }

/* --- isca de robô ----------------------------------------------------------
   Campo que existe só no HTML: robô preenche tudo o que encontra, pessoa
   nenhuma vê nem alcança. Não usa `display: none` nem `hidden` porque robô
   que se dá ao trabalho de olhar o CSS pula os dois; sai da tela de verdade.

   O `aria-hidden` e o `tabindex="-1"` vêm do JavaScript que o injeta, e são o
   que o mantêm fora do caminho de quem usa leitor de tela ou teclado.
   --------------------------------------------------------------------------- */
.sp-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- campo que chegou preenchido -------------------------------------------
   Artista, cidade e local vêm na querystring do botão "Contratar" da página
   anterior. O fio à esquerda diz "isto veio pronto, confira" — sem travar
   nada: o campo continua editável, e quem chegou por outro caminho não vê
   diferença nenhuma. */
[data-vindo-da-url="sim"] {
  border-inline-start: 2px solid var(--sp-acento-texto);
}

/* --- assinar a agenda ------------------------------------------------------
   Mora nos componentes porque é usado por duas páginas: o arquivo da agenda,
   com o feed do artistas inteiro, e a página do artista, com o dele. Mesma
   regra do carrossel e do campo em bloco.

   Fica alinhado à esquerda e não ganha destaque de bloco: assinar é ação de
   quem já decidiu acompanhar, não a conversão da página.
   --------------------------------------------------------------------------- */
.sp-assinar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-3) var(--sp-e-5);
  margin-block-end: var(--sp-e-6);
}

.sp-assinar__apoio {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-peq);
  line-height: 1.5;
  max-width: 34ch;
}

/* --- item de material ------------------------------------------------------
   Uma linha de arquivo: ícone do formato, nome, formato e peso, e a seta de
   ação. Veio de `contratante.css` na 0.55.0, quando a página de imprensa
   passou a usar o mesmo item — e ela não carrega a folha do contratante.

   O recuo e o raio são de ITEM, não de bloco: cinco linhas de arquivo com
   raio de bloco viram uma parede de botões, e a linha de arquivo não é uma
   chamada para ação.
   --------------------------------------------------------------------------- */
.sp-item-material {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-e-3);
  align-items: center;
  padding: var(--sp-e-4);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio);
  transition: border-color var(--sp-transicao), background var(--sp-transicao);
}
.sp-item-material:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.sp-item-material > i:first-child { font-size: 1.25rem; color: var(--sp-acento-texto); }
.sp-item-material > i:last-child { font-size: 1rem; color: var(--sp-tinta-3); }

/* `display: block` nos dois: são `<span>` dentro de `<span>`, e em linha eles
   fluem na mesma linha — o nome e o formato saíam grudados num parágrafo só,
   e o `margin-block-start` da meta não valia. */
.sp-item-material__nome {
  display: block;
  font-weight: 600;
  font-size: var(--sp-t-peq);
}
.sp-item-material__meta {
  display: block;
  margin-block-start: 2px;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

/* --- subgrupo por assunto --------------------------------------------------
   Rótulo miúdo que separa imagem, texto, áudio e documento dentro de uma
   lista de material. Veio de `contratante.css` na 0.55.0, quando a página de
   imprensa passou a agrupar do mesmo jeito.

   Bloco com um assunto só não ganha subgrupo: rotular "Documentos" uma lista
   que só tem documentos repete o que a lista inteira já diz. */
.sp-subgrupo__titulo {
  margin-block-end: var(--sp-e-3);
  color: var(--sp-tinta-3);
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-mini);
  font-weight: 500;
}

/* --- retorno de formulário -------------------------------------------------
   Região `role="status"` que já existe vazia no HTML desde o carregamento —
   região criada no momento do envio não é anunciada de forma confiável. Veio
   de `contato.css` na 0.57.0, quando o credenciamento de imprensa passou a
   usar a mesma peça. */
.sp-forma__retorno:empty { display: none; }

.sp-forma__retorno {
  margin-block-start: var(--sp-e-5);
  padding: var(--sp-e-3) var(--sp-e-4);
  border-inline-start: 2px solid var(--sp-linha);
  font-size: var(--sp-t-peq);
  color: var(--sp-texto-2);
}

.sp-forma__retorno[data-tom="certo"] { border-inline-start-color: var(--sp-acento); }
.sp-forma__retorno[data-tom="erro"]  { border-inline-start-color: var(--sp-acento); color: var(--sp-texto); }

/* --- cartão de credenciado -------------------------------------------------
   Material que aparece sem explicação faz a pessoa duvidar se pode usar. O
   rótulo responde antes de ela perguntar. */
.sp-cartao__rotulo {
  display: flex;
  align-items: center;
  gap: var(--sp-e-2);
  margin-block-end: var(--sp-e-2);
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sp-cartao__saida {
  margin-block-start: var(--sp-e-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-tinta-3);
  font-family: inherit;
  font-size: var(--sp-t-peq);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  cursor: pointer;
}

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