/* ---------------------------------------------------------------------------
   Site publico. Depende de base.css (variaveis e reset).
   Nenhum hex literal aqui — use var(--cor-*).
   --------------------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.conteudo-principal {
  flex: 1;
  padding-block: var(--espaco-4);
}

/* --------------------------------------------------------------------------
   Cabecalho — masthead. Mobile-first: a BARRA (marca + hamburguer + busca) e,
   abaixo, a FAIXA de navegacao (gaveta no mobile, linha propria no desktop).
   -------------------------------------------------------------------------- */

.cabecalho-site {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--cor-branco);
  border-bottom: 1px solid var(--cor-fundo-alt);
  box-shadow: var(--sombra-1);
}

.cabecalho-site__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1) var(--espaco-2);
  padding-block: var(--espaco-2);
}

.marca {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto; /* empurra busca/menu para a direita, como o texto fazia */
}

/* Logo da marca (wordmark horizontal, transparente). Altura fixa; largura auto. */
.marca__logo {
  height: 2.1rem;
  width: auto;
  display: block;
  transition: opacity var(--transicao);
}

.marca:hover .marca__logo {
  opacity: 0.82;
}

@media (min-width: 48rem) {
  .marca__logo {
    height: 2.4rem;
  }
}

.botao-menu {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--cor-fundo-alt);
  border-radius: var(--raio-md);
  padding: 0.4rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* Busca: no mobile ocupa a linha inteira, sob a marca. */
.cabecalho-site__busca {
  flex: 1 1 100%;
}

.busca {
  display: flex;
  gap: var(--espaco-1);
}

.busca__campo {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cor-fundo-alt);
  border-radius: var(--raio-md);
  background-color: var(--cor-fundo);
}

.busca__botao {
  padding: 0.5rem var(--espaco-2);
  border: 0;
  border-radius: var(--raio-md);
  background-color: var(--cor-acento);
  color: var(--cor-branco);
  cursor: pointer;
}

/* Faixa de navegacao: gaveta no mobile (escondida ate abrir). Branca, para o
   masthead inteiro ser uma superficie clara so — o bege fica para corpo/rodape. */
.menu-publico {
  display: none;
  border-top: 1px solid var(--cor-fundo-alt);
  background-color: var(--cor-branco);
}

.menu-publico--aberto {
  display: block;
}

.menu-publico__lista {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-block: var(--espaco-1);
}

.menu-publico__link {
  display: block;
  padding: 0.6rem 0;
  color: var(--cor-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--cor-fundo-alt);
}

.menu-publico__lista > li:last-child .menu-publico__link {
  border-bottom: 0;
}

.menu-publico__link:hover,
.menu-publico__link[aria-current="page"] {
  color: var(--cor-acento);
}

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */

.rodape-site {
  /* Filete terracota no topo separa o rodape do conteudo com elegancia. */
  border-top: 3px solid var(--cor-acento);
  background-color: var(--cor-fundo-alt);
  padding-block: var(--espaco-4) var(--espaco-3);
  font-size: 0.9375rem;
}

.rodape-site__grade {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

/* Coluna da marca com mais peso: nome no display, tagline discreta. */
.rodape-site__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 var(--espaco-1);
}

.rodape-site__sobre {
  max-width: 34ch;
  margin: 0 0 var(--espaco-1);
  opacity: 0.85;
}

.rodape-site__cidade {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Titulo de secao em "eyebrow": maiusculas pequenas e espacadas. */
.rodape-site__titulo {
  margin: 0 0 var(--espaco-2);
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cor-acento);
}

.rodape-site__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rodape-site__lista a {
  color: var(--cor-texto);
  text-decoration: none;
}

.rodape-site__lista a:hover {
  color: var(--cor-acento);
}

/* Redes: fileira de icones em botoes circulares, compacta. */
.rodape-site__redes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rodape-site__rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--cor-fundo);
  border-radius: 50%;
  color: var(--cor-texto);
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.rodape-site__rede svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.rodape-site__rede:hover {
  color: var(--cor-branco);
  background-color: var(--cor-acento);
  border-color: var(--cor-acento);
}

/* Linha legal: direitos + politicas em linha, separadas do resto. */
.rodape-site__legal {
  margin-top: var(--espaco-4);
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--cor-fundo);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  font-size: 0.8125rem;
}

.rodape-site__direitos {
  margin: 0;
  max-width: none;
  opacity: 0.75;
}

.rodape-site__politicas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--espaco-2);
}

.rodape-site__politicas a {
  color: var(--cor-texto);
  text-decoration: none;
}

.rodape-site__politicas a:hover {
  color: var(--cor-acento);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Pagina de erro
   -------------------------------------------------------------------------- */

.pagina-erro {
  padding-block: var(--espaco-4);
  text-align: center;
}

.pagina-erro__id {
  font-size: 0.875rem;
  color: var(--cor-texto);
  opacity: 0.7;
}

.pagina-erro__codigo {
  font-family: var(--fonte-titulo);
  font-size: 4rem;
  line-height: 1;
  color: var(--cor-acento);
  margin-bottom: var(--espaco-2);
}

.pagina-erro__texto {
  max-width: var(--largura-leitura);
  margin: var(--espaco-2) auto var(--espaco-3);
}

.busca--erro {
  justify-content: center;
  margin-bottom: var(--espaco-3);
}

.pagina-erro__acoes {
  display: flex;
  gap: var(--espaco-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Botoes do site publico
   -------------------------------------------------------------------------- */

.botao {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: var(--cor-acento);
  color: var(--cor-branco);
  border: 1px solid var(--cor-acento);
  border-radius: var(--raio);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  opacity: 0.92;
}

.botao--secundario {
  background-color: transparent;
  color: var(--cor-acento);
}

/* --------------------------------------------------------------------------
   Pagina institucional (conteudo de texto vindo do banco)
   -------------------------------------------------------------------------- */

/* Folha branca elevada: a pagina de leitura flutua sobre o bege, em vez de se
   diluir nele. Da contraste e ar moderno sem sair da paleta. */
.pagina-institucional {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  padding: var(--espaco-3) var(--espaco-2);
}

@media (min-width: 48rem) {
  .pagina-institucional {
    padding: var(--espaco-4);
  }
}

.pagina-institucional > h1 {
  margin-bottom: var(--espaco-3);
}

.conteudo-rico > * + * {
  margin-top: var(--espaco-2);
}

.conteudo-rico h2,
.conteudo-rico h3 {
  margin-top: var(--espaco-3);
  font-family: var(--fonte-titulo);
}

.conteudo-rico img {
  max-width: 100%;
  height: auto;
}

.conteudo-rico ul,
.conteudo-rico ol {
  padding-left: 1.5rem;
}

.conteudo-rico blockquote {
  border-left: 3px solid var(--cor-acento);
  padding-left: var(--espaco-2);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Autora: bio + portfolio agrupado por tipo
   -------------------------------------------------------------------------- */

/* A pagina inteira (titulo + bio + blocos) vive numa coluna unica e centralizada,
   para tudo ter a MESMA largura — a bio nao fica mais menor que os blocos. */
.autora {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
}

/* Bio na mesma folha branca das paginas institucionais — coerencia visual.
   Sem max-width proprio: preenche a coluna .autora, alinhada aos blocos. */
.autora__bio {
  margin-bottom: var(--espaco-4);
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  padding: var(--espaco-3) var(--espaco-2);
}

@media (min-width: 48rem) {
  .autora__bio {
    padding: var(--espaco-4);
  }
}

/* Cada tipo (Dossie, Livros...) vira um BLOCO branco titulado: o titulo mora
   dentro do bloco, junto com seus itens (linhas), em vez de flutuar solto. */
.autora__grupo {
  margin-top: var(--espaco-3);
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-3) var(--espaco-2);
}

@media (min-width: 48rem) {
  .autora__grupo {
    padding: var(--espaco-3);
  }
}

.autora__grupo-titulo {
  font-family: var(--fonte-titulo);
  border-bottom: 2px solid var(--cor-acento);
  padding-bottom: var(--espaco-1);
  margin: 0 0 var(--espaco-1);
}

/* Itens como LINHAS dentro do bloco do grupo, separadas por um filete. */
.portfolio-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.portfolio-item {
  display: grid;
  /* minmax(0,1fr): deixa a coluna de texto ENCOLHER e quebrar linha — sem isso
     o 1fr cresce ate o conteudo e estoura a linha. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espaco-2);
  align-items: start;
  padding-block: var(--espaco-3);
}

@media (min-width: 48rem) {
  .portfolio-item {
    gap: var(--espaco-3);
  }
}

/* Filete entre itens; o primeiro encosta no titulo, o ultimo na base do bloco. */
.portfolio-item + .portfolio-item {
  border-top: 1px solid var(--cor-fundo-alt);
}

.portfolio-item:first-child {
  padding-top: var(--espaco-2);
}

.portfolio-item:last-child {
  padding-bottom: 0;
}

/* A coluna de dados tambem precisa poder encolher. */
.portfolio-item__dados {
  min-width: 0;
}

/* Dentro do card, a descricao usa a largura do card (nao a de leitura de 68ch). */
.portfolio-item .conteudo-rico p {
  max-width: none;
}

.portfolio-item__capa,
.portfolio-item__capa--vazia {
  width: 5.5rem;
  border-radius: var(--raio-md);
}

.portfolio-item__capa {
  height: auto;
}

.portfolio-item__capa--vazia {
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--cor-fundo-alt);
  font-size: 0.7rem;
  color: var(--cor-texto);
  opacity: 0.65;
}

.portfolio-item__ano {
  color: var(--cor-acento);
  font-weight: 600;
}

/* Descricao: texto puro, limitado a 4 linhas com "Ver mais". */
.portfolio-item__resumo {
  max-width: none;
  margin: 0;
  overflow-wrap: break-word;
}

.portfolio-item__resumo--curto {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-vermais {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-acento);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.portfolio-item__acao {
  margin-top: var(--espaco-2);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Mobile-first: a partir daqui, telas maiores
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .botao-menu {
    display: none;
  }

  /* Busca volta para a barra, alinhada a direita da marca. */
  .cabecalho-site__busca {
    flex: 0 1 22rem;
    margin-left: auto;
  }

  /* Navegacao: sempre visivel, faixa horizontal na sua propria linha. */
  .menu-publico {
    display: block;
  }

  .menu-publico__lista {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--espaco-2) var(--espaco-3);
  }

  .menu-publico__link,
  .menu-publico__lista > li:last-child .menu-publico__link {
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transicao);
  }

  .menu-publico__link:hover,
  .menu-publico__link[aria-current="page"] {
    border-bottom-color: var(--cor-acento);
  }

  /* Marca cresce e ocupa a esquerda; Contato e Redes agrupados a direita,
     lado a lado — em vez de espalhados pela largura toda. */
  .rodape-site__grade {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--espaco-4);
  }

  .rodape-site__marca {
    flex: 1 1 auto;
  }

  .rodape-site__col {
    flex: 0 0 auto;
    min-width: 9rem;
  }

  /* Direitos a esquerda, politicas a direita, na mesma linha. */
  .rodape-site__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Cartoes de publicacao (acervo e relacionadas)
   -------------------------------------------------------------------------- */

.grade-cards {
  display: grid;
  gap: var(--espaco-3);
  grid-template-columns: 1fr;
}

.card-pub {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.card-pub:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

/* Cartao em destaque: anel terracota discreto + selo sobre a imagem. */
.card-pub--destaque {
  box-shadow: 0 0 0 2px var(--cor-acento), var(--sombra-1);
}

.card-pub--destaque:hover {
  box-shadow: 0 0 0 2px var(--cor-acento), var(--sombra-2);
}

.card-pub__destaque {
  position: absolute;
  top: var(--espaco-1);
  left: var(--espaco-1);
  z-index: 1;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background-color: var(--cor-acento);
  color: var(--cor-branco);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--sombra-1);
}

.card-pub__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-pub__img,
.card-pub__img--vazia {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-pub__img--vazia {
  background-color: var(--cor-fundo-alt);
}

.card-pub__tipo {
  display: inline-block;
  margin: var(--espaco-2) var(--espaco-2) 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-acento);
}

.card-pub__titulo {
  margin: 0.25rem var(--espaco-2) 0;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
}

/* Descricao em ate 3 linhas: cards com altura de texto uniforme na grade. */
.card-pub__linha {
  margin: 0.5rem var(--espaco-2) 0;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top:auto empurra a data para a base — como o card e flex column e a
   grade estica as celulas, todas as datas alinham no rodape dos cards. */
.card-pub__meta {
  margin: 0.5rem var(--espaco-2) var(--espaco-2);
  margin-top: auto;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Acervo: painel de filtros + resultados
   -------------------------------------------------------------------------- */

.acervo__titulo {
  margin-bottom: var(--espaco-3);
}

.acervo__layout {
  display: grid;
  gap: var(--espaco-3);
  grid-template-columns: 1fr;
}

/* Painel de filtros na mesma folha branca dos cards — superficie elevada, o
   bege alterna so como filete divisor entre os grupos. */
.acervo-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-3) var(--espaco-2);
  align-self: start;
}

.acervo-filtros__grupo {
  border: none;
  border-top: 1px solid var(--cor-fundo-alt);
  padding: var(--espaco-2) 0 0;
  margin: 0;
}

.acervo-filtros__grupo legend {
  font-weight: 600;
  color: var(--cor-acento);
  padding: 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.acervo-filtros__opcao {
  display: block;
  padding: 0.2rem 0;
  cursor: pointer;
  transition: color var(--transicao);
}

.acervo-filtros__opcao:hover {
  color: var(--cor-acento);
}

.acervo-ativos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  align-items: center;
  margin-bottom: var(--espaco-2);
}

.acervo-ativos__rotulo {
  font-weight: 600;
}

.acervo-ativos__limpar {
  color: var(--cor-acento);
}

.acervo__contagem {
  opacity: 0.75;
  margin-bottom: var(--espaco-2);
}

.etiqueta {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background-color: var(--cor-fundo-alt);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--cor-texto);
  transition: background-color var(--transicao), color var(--transicao);
}

/* Etiqueta de taxonomia (link para o acervo filtrado) fica terracota no hover;
   a de "remover filtro" ja e terracota, entao so escurece de leve. */
.etiqueta:not(.etiqueta--remover):hover {
  background-color: var(--cor-acento);
  color: var(--cor-branco);
}

.etiqueta--remover {
  background-color: var(--cor-acento);
  color: var(--cor-branco);
}

/* --------------------------------------------------------------------------
   Pagina da publicacao
   -------------------------------------------------------------------------- */

/* A publicacao mora numa folha branca elevada, como as demais telas de leitura.
   Mobile-first: padding enxuto no celular, generoso no desktop. */
.pub {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  padding: var(--espaco-2);
}

@media (min-width: 48rem) {
  .pub {
    padding: var(--espaco-4);
  }
}

/* Rede de seguranca: qualquer palavra/URL longa quebra em vez de estourar a
   coluna (o nbsp entre palavras ja e removido na gravacao pelo sanitizador). */
.conteudo-rico {
  overflow-wrap: break-word;
}

/* Imagem de destaque: sozinha no topo, centralizada e grande; o texto vem
   ABAIXO (a ordem ja e essa no HTML: <figure> antes do <header>). */
.pub__destaque {
  margin: 0 0 var(--espaco-4);
  text-align: center;
}

.pub__destaque img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--raio-md);
}

.pub__credito {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: var(--espaco-1);
}

.pub__credito-fonte {
  display: block;
  font-style: italic;
}

.pub__cabecalho {
  margin-block: var(--espaco-3);
}

.pub__tipo {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-acento);
  font-size: 0.8rem;
}

.pub__titulo {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  line-height: 1.15;
}

.pub__subtitulo {
  font-size: 1.25rem;
  margin-top: var(--espaco-1);
}

.pub__linha-fina {
  font-style: italic;
  margin-top: var(--espaco-1);
}

.pub__meta {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: var(--espaco-2);
}

.pub__abertura {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: var(--espaco-2);
}

.pub__midias {
  margin-block: var(--espaco-4);
}

.pub-midia {
  margin-bottom: var(--espaco-3);
}

.pub-midia__artista {
  display: block;
  opacity: 0.8;
}

.pub-midia__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin-top: var(--espaco-1);
}

.pub-midia__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--raio);
}

.pub__taxonomias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  margin-block: var(--espaco-3);
}

.pub__compartilhar {
  display: flex;
  gap: var(--espaco-2);
  align-items: center;
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--cor-fundo-alt);
}

.pub__relacionadas {
  margin-top: var(--espaco-4);
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .grade-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .acervo__layout {
    grid-template-columns: 16rem 1fr;
  }
}

@media (min-width: 64rem) {
  .acervo__resultados .grade-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Formularios publicos (contato, enviar-conteudo)
   -------------------------------------------------------------------------- */

/* Formulario publico na mesma folha branca — contato e envio ganham cartao. */
.form-publico {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  padding: var(--espaco-3) var(--espaco-2);
}

@media (min-width: 48rem) {
  .form-publico {
    padding: var(--espaco-4);
  }
}

/* Campos brancos: a borda os separa do cartao; o placeholder guia o preenchimento. */
.form-publico .campo input,
.form-publico .campo textarea,
.form-publico .campo select {
  background-color: var(--cor-branco);
  border-color: var(--cor-fundo-alt);
}

.form-publico .campo ::placeholder {
  color: var(--cor-texto);
  opacity: 0.45;
}

.form-publico__form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-block: var(--espaco-3);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.campo label {
  font-weight: 600;
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--cor-fundo-alt);
  border-radius: var(--raio);
  background-color: var(--cor-branco);
  font: inherit;
}

.campo__ajuda {
  font-size: 0.85rem;
  opacity: 0.75;
}

.erro-campo {
  color: var(--toast-erro);
  font-size: 0.85rem;
}

/* Honeypot: fora da tela, invisivel para humanos (sem display:none, que
   alguns bots detectam). */
.campo-oculto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.progresso {
  position: relative;
  height: 1.5rem;
  background-color: var(--cor-fundo-alt);
  border-radius: var(--raio);
  overflow: hidden;
}

.progresso__barra {
  height: 100%;
  background-color: var(--cor-acento);
  transition: width 0.2s;
}

.progresso__rotulo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--cor-texto);
}

.form-publico__canais {
  border-top: 1px solid var(--cor-fundo-alt);
  padding-top: var(--espaco-2);
}

/* --------------------------------------------------------------------------
   Revista: cards de edicao e pagina da edicao
   -------------------------------------------------------------------------- */

/* A listagem e uma coluna centralizada, alinhada ao titulo — nada de card
   perdido num mar de bege. */
.revista {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
}

/* Cada edicao e uma LINHA horizontal (capa + texto), empilhadas. Funciona bem
   com uma unica edicao (preenche a largura) e com muitas (lista limpa) — sem o
   card estreito e solitario que o grid de capas deixava. */
.grade-edicoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.card-edicao {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--espaco-2);
  align-items: start;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-2);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

@media (min-width: 48rem) {
  .card-edicao {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--espaco-3);
    padding: var(--espaco-3);
  }
}

.card-edicao:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.card-edicao__capa-link {
  display: block;
}

.card-edicao__capa,
.card-edicao__capa--vazia {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio-md);
}

.card-edicao__capa--vazia {
  background-color: var(--cor-fundo-alt);
}

/* min-width:0: a coluna de texto encolhe e quebra linha em vez de estourar. */
.card-edicao__corpo {
  min-width: 0;
}

.card-edicao__numero {
  margin: 0 0 0.15rem;
  color: var(--cor-acento);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card-edicao__titulo {
  margin: 0 0 0.3rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.2;
}

.card-edicao__titulo a {
  color: inherit;
  text-decoration: none;
}

.card-edicao__titulo a:hover {
  color: var(--cor-acento);
}

.card-edicao__data {
  margin: 0 0 var(--espaco-1);
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Descricao limitada a 3 linhas — cards com altura harmoniosa. */
.card-edicao__desc {
  margin: 0;
  max-width: none;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Publicacao em lista horizontal (home: "Ultimas publicacoes")
   Visual mais sobrio que o card em destaque — nao compete pela atencao.
   -------------------------------------------------------------------------- */

.lista-pub {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.item-pub {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--espaco-2);
  align-items: center;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-2);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

@media (min-width: 48rem) {
  .item-pub {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--espaco-3);
    padding: var(--espaco-2) var(--espaco-3);
  }
}

.item-pub:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.item-pub__img-link {
  display: block;
}

.item-pub__img,
.item-pub__img--vazia {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-md);
}

.item-pub__img--vazia {
  background-color: var(--cor-fundo-alt);
}

/* min-width:0: a coluna de texto encolhe e quebra em vez de estourar. */
.item-pub__corpo {
  min-width: 0;
}

.item-pub__tipo {
  margin: 0 0 0.15rem;
  color: var(--cor-acento);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.item-pub__titulo {
  margin: 0 0 0.2rem;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  line-height: 1.2;
}

.item-pub__titulo a {
  color: inherit;
  text-decoration: none;
}

.item-pub__titulo a:hover {
  color: var(--cor-acento);
}

.item-pub__data {
  margin: 0 0 var(--espaco-1);
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Descricao em ate 2 linhas: item compacto, sem virar bloco pesado. */
.item-pub__desc {
  margin: 0;
  max-width: none;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mesma folha branca elevada da publicacao — coerencia entre telas de leitura.
   Mobile-first: padding enxuto no celular, generoso no desktop. */
.edicao {
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  background-color: var(--cor-branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  padding: var(--espaco-2);
}

@media (min-width: 48rem) {
  .edicao {
    padding: var(--espaco-4);
  }
}

/* Cabecalho da edicao: capa GRANDE e centralizada no topo, texto abaixo. */
.edicao__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
}

.edicao__capa {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--raio-md);
}

.edicao__descricao {
  margin-bottom: var(--espaco-4);
}

.edicao__publicacoes h2 {
  border-bottom: 2px solid var(--cor-acento);
  padding-bottom: var(--espaco-1);
  margin-bottom: var(--espaco-3);
}

/* --------------------------------------------------------------------------
   Polimento do layout publico (mobile-first)
   -------------------------------------------------------------------------- */

/* Menos peso vertical no mobile; respiro maior no desktop (media abaixo). */
.conteudo-principal {
  padding-block: var(--espaco-3);
}

/* Presenca editorial: um filete terracota curto sob o titulo da pagina. */
.pagina-institucional > h1,
.autora > h1,
.acervo__titulo,
.form-publico > h1 {
  margin-bottom: var(--espaco-3);
}

.pagina-institucional > h1::after,
.autora > h1::after,
.acervo__titulo::after,
.form-publico > h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: var(--espaco-2);
  background-color: var(--cor-acento);
}

/* Home: hero de abertura. Mobile-first: logo em cima, texto embaixo, empilhados.
   No desktop vira duas colunas — texto a esquerda, logo (a marca) a direita. */
.home-hero {
  display: grid;
  gap: var(--espaco-3);
  align-items: center;
  padding-block: var(--espaco-3) var(--espaco-4);
}

.home-hero__marca {
  margin: 0; /* e o H1 do hero; a logo carrega o nome (alt) */
}

.home-hero__logo {
  width: 100%;
  max-width: 22rem;
  height: auto;
  display: block;
}

.home-hero__intro {
  font-size: 1.3rem;
  line-height: 1.55;
  max-width: 36ch;
}

.home-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
  margin-bottom: 0;
}

/* Secoes de conteudo da home (destaques, ultimas publicacoes). */
.home-secao {
  margin-top: var(--espaco-4);
}

.home-secao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-2);
  margin-bottom: var(--espaco-3);
  padding-bottom: var(--espaco-1);
  border-bottom: 2px solid var(--cor-acento);
}

.home-secao__titulo {
  margin: 0;
  font-size: 1.6rem;
}

.home-secao__link {
  font-size: 0.95rem;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .conteudo-principal {
    padding-block: var(--espaco-4);
  }

  .home-hero {
    grid-template-columns: 1fr auto;
    gap: var(--espaco-4);
    padding-block: var(--espaco-4);
  }

  /* Posicionamento explicito: texto na coluna 1, logo na 2 — independentemente
     da ordem no HTML (a logo vem antes por semantica/mobile). */
  .home-hero__texto {
    grid-column: 1;
    grid-row: 1;
  }

  .home-hero__marca {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .home-hero__logo {
    max-width: 30rem;
  }
}