/* ============================================================
   MARAU — ajustes próprios da versão WordPress
   Complementa css/marau.css, que veio da prévia e é gerado.
   Aqui ficam só os blocos que não existiam no site estático:
   listas vazias, chamadas de cadastro e o que o WordPress
   acrescenta por conta própria.
   ============================================================ */

/* Link de acessibilidade: some até receber o foco pelo teclado. */
.pula-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ardosia);
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  border-radius: 0 0 8px 0;
}

.pula-para-conteudo:focus {
  left: 0;
}

/* Listagem sem registro publicado. */
.aviso-vazio {
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: 44px 28px;
  text-align: center;
  color: var(--tinta-fraca);
  font-family: var(--mono);
  font-size: 14px;
  background: var(--papel-2);
}

.aviso-vazio p {
  margin: 0;
}

/* Convite a se cadastrar, no lugar de exemplos inventados. */
.chamada-cadastro {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 46px 34px;
  background: var(--papel-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.chamada-cadastro p {
  max-width: 62ch;
  margin: 0;
  color: var(--tinta-fraca);
}

.chamada-cadastro .acoes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Crédito abaixo de uma galeria. */
.galeria-credito {
  margin-top: 12px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* Observação curta em cartão lateral. */
.nota-mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--tinta-fraca);
  margin: 0;
}

/* Na home o evento traz o período por extenso, não dia e mês soltos. */
.proximos .ev-data {
  min-width: 92px;
  max-width: 130px;
}

.proximos .ev-mes {
  display: block;
  line-height: 1.5;
  white-space: normal;
}

.proximos .ev h4 a {
  color: inherit;
  text-decoration: none;
}

.proximos .ev h4 a:hover {
  color: var(--verde);
}

/* O WordPress envolve as imagens de conteúdo; mantém a largura do artigo. */
.artigo-corpo img,
.texto img {
  max-width: 100%;
  height: auto;
}

.artigo-corpo figure,
.texto figure {
  max-width: 100%;
}

/* Paginação gerada pelo WordPress. */
.paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta);
  text-decoration: none;
  background: var(--branco);
}

.paginacao .page-numbers:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.paginacao .page-numbers.current {
  background: var(--ardosia);
  border-color: var(--ardosia);
  color: #fff;
}

.paginacao .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* Barra de administração: não pode cobrir o cabeçalho fixo. */
body.admin-bar .topo {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .topo {
    top: 46px;
  }
}

/* Texto corrido dentro de um cartão lateral. */
.cartao-texto {
  font-size: 15px;
  color: var(--tinta-fraca);
  line-height: 1.7;
  margin-bottom: 18px;
}

.conteudo-lado .cartao-texto {
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 16px;
}

/* Linha de apoio abaixo de um link em lista de dados. */
.marau-sub-link {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--corpo);
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

/* O fecho da linha do tempo alinha a lateral à direita, como na prévia. */
.tl-fim {
  display: flex;
  justify-content: flex-end;
}

.tl-fim .conteudo-lado {
  max-width: 340px;
  width: 100%;
}

@media (max-width: 860px) {
  .tl-fim {
    justify-content: stretch;
  }

  .tl-fim .conteudo-lado {
    max-width: none;
  }
}

/* Legenda de uma foto de contexto numa matéria. */
.galeria-legenda {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tinta-fraca);
}

/* ============================================================
   Cor dos componentes que são links

   O kit do Elementor define a cor de link do site inteiro, e essa
   regra — .elementor-kit-N a — pesa mais que a classe simples do
   componente. Sem o que vem abaixo, todo botão saía verde: texto
   verde sobre laranja dá 1,4 de contraste, ilegível.

   Os valores são os mesmos da prévia aprovada. Botão não é link
   comum: cada variante tem a própria cor.
   ============================================================ */

a.btn.btn-1,
a.btn.btn-2,
a.btn.btn-escuro,
.btn.btn-1,
.btn.btn-2,
.btn.btn-escuro {
  color: #fff;
}

/* O botão do WhatsApp é verde claro com texto escuro, como na prévia — entrou
   nesta lista por engano na primeira varredura e virou 2,56:1. */
a.btn.btn-zap,
.btn.btn-zap {
  color: #22301A;
}

a.btn.btn-claro,
.btn.btn-claro {
  color: #22301A;
}

a.btn.btn-vazado,
.btn.btn-vazado {
  color: var(--ardosia);
}

.btn.btn-vazado:hover,
a.btn.btn-vazado:hover {
  color: #fff;
}

.festival-txt .link-fest {
  color: #B85328;
}

.artista-txt .ver-ficha {
  color: var(--tinta-fraca);
}

.nov-txt .nov-ler,
.nov-destaque-txt .nov-ler {
  color: var(--verde);
}

.ficha-migalha a {
  color: #94A4B0;
}

.cad-topo .cad-volta {
  color: var(--rodape-texto);
}

.cad-topo .cad-volta:hover {
  color: var(--verde-claro);
}

/* O rodapé tem a própria escala de cinza sobre o fundo escuro. */
.rodape a {
  color: #B9C5CE;
}

.rodape a:hover {
  color: var(--verde-claro);
}

.rodape .creditos a {
  color: inherit;
}

/* Rodapé da AROK: texto e ícones em bege sobre o chumbo, como na marca. */
.arok a,
.arok .arok-txt {
  color: #EDE3D0;
}

.arok a:hover {
  color: #FF6A39;
}

/* Barras do cabeçalho e menu: cor própria, não a de link do kit. */
.menu a,
.barra-inst .inst-link {
  color: var(--tinta);
}

.menu a:hover,
.barra-inst .inst-link:hover {
  color: var(--verde);
}

.submenu a {
  color: var(--tinta);
}

/* O link de pular para o conteúdo aparece só no foco por teclado;
   sobre o fundo escuro ele precisa do branco, não da cor de link. */
a.pula-para-conteudo {
  color: #fff;
}

/* As tarjas de tipo são links nas fichas: a cor do texto é sempre o branco
   sobre a cor da tarja, nunca a cor de link do kit. */
a.tag,
.local-selos a.tag,
.ficha-tags a.tag,
.nov-meta a.tag {
  color: #fff;
}

/* ------------------------------------------------------------ contraste

   O laranja da marca com texto branco dá 3,4:1 — legível, mas abaixo do
   4,5:1 que a WCAG AA pede para texto normal, e este é um site público.
   Nos elementos com texto pequeno usa-se o laranja escuro da própria
   paleta, que chega a 4,8:1. A cor de marca segue a mesma; muda só o tom
   onde há texto por cima. */

.btn.btn-1,
a.btn.btn-1,
.jet-form-builder__submit,
.jet-form-builder__action-button {
  background: #B85328;
}

.btn.btn-1:hover,
a.btn.btn-1:hover,
.jet-form-builder__submit:hover,
.jet-form-builder__action-button:hover {
  background: #9E4622;
}

.tag.tag-laranja,
a.tag.tag-laranja {
  background: #B85328;
}

/* Dois textos pequenos ficavam em 4,3:1. O ajuste é de um tom e leva os
   dois acima de 4,5:1, sem mexer na leitura do desenho. */
.festival-txt .link-fest {
  color: #A2451F;
}

.ficha-migalha a {
  color: #A7B4BE;
}

/* ============================================================
   ROTAS TURÍSTICAS
   O índice mostra um cartão por rota e cada rota tem página
   própria. O cartão é o mesmo .espaco da prévia, encurtado.
   ============================================================ */

.rota-cartao .rota-capa {
  display: block;
}

.rota-cartao .rota-capa img {
  width: 100%;
  display: block;
  /* O WordPress escreve width e height no <img>; sem height auto a
     proporção declarada aqui é ignorada e a foto sai inteira. */
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}

.rota-cartao:hover .rota-capa img {
  transform: scale(1.02);
}

.rota-cartao .espaco-txt h2 a {
  color: inherit;
  text-decoration: none;
}

.rota-cartao .espaco-txt h2 a:hover {
  color: var(--verde);
}

.rota-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 22px;
}

.rota-conta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* O destaque do evento virou link para a página do evento. */
a.destaque-rota {
  text-decoration: none;
  transition: background .2s ease;
}

a.destaque-rota:hover {
  background: #26313B;
}

.destaque-rota-ir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--verde-claro);
}

.destaque-rota-ir svg {
  width: 14px;
  height: 14px;
}

a.destaque-rota:hover .destaque-rota-ir {
  color: #fff;
}

/* Cartão de associado que leva a um perfil cadastrado. */
.assoc h4 a {
  color: inherit;
  text-decoration: none;
}

.assoc h4 a:hover {
  color: var(--verde);
}

/* ============================================================
   PRAZO DE CADASTRO
   A faixa aparece nas páginas de cadastro, nas listagens de
   profissionais e estabelecimentos e na chamada da home. As
   datas saem de Configurações › Geral.
   ============================================================ */

.aviso-prazo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 22px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.aviso-prazo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  flex: 1;
  min-width: 240px;
}

.aviso-prazo-selo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--verde);
  border-radius: 99px;
  padding: 6px 12px;
  flex: none;
}

.aviso-prazo--futuro .aviso-prazo-selo {
  background: #B85328;
}

.aviso-prazo--encerrado .aviso-prazo-selo {
  background: var(--tinta-fraca);
}

.aviso-prazo--centro {
  max-width: 640px;
  margin: 40px auto 0;
  justify-content: center;
  text-align: center;
}

/* Dentro da moldura escura do topo do cadastro. */
.cad-corpo .aviso-prazo {
  background: #fff;
}

/* Na home o fundo já é claro; a faixa ganha contorno mais firme. */
.chamada-cadastro + .aviso-prazo,
.secao .aviso-prazo {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .aviso-prazo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   CONTRASTE DE TEXTO PEQUENO
   A paleta aprovada continua a mesma. O que muda aqui é o tom
   usado quando a cor vira texto pequeno e a versão original
   fica abaixo de 4,5:1 — o mínimo da WCAG AA. Os quatro tons
   também estão no kit do Elementor, em Cores personalizadas.
   ============================================================ */

:root {
  --laranja-texto: #B85328;       /* laranja sobre papel: 3,2 → 4,9 */
  --verde-claro-texto: #9DC353;   /* verde claro sobre ardósia: 4,4 → 5,5 */
  --tinta-fraca-texto: #54626D;   /* tinta fraca sobre branco: 4,4 → 5,0 */
  --rodape-texto: #A9B7C1;        /* créditos do rodapé: 3,4 → 6,3 */
}

/* Etiqueta em mono sobre o fundo escuro do banner e das seções. */
.hero .eyebrow,
.secao-escura .eyebrow,
.ficha-capa .eyebrow,
.cad-topo .eyebrow {
  color: var(--verde-claro-texto);
}

/* Ano da linha do tempo e mês do calendário de eventos. */
.tl .ano, .tl-ano,
.ev-mes,
.marco .ano {
  color: var(--laranja-texto);
}

/* Marcas do pé dos cartões de rota. */
.rotas .meta span,
.rota-txt .meta span {
  color: var(--tinta-fraca-texto);
}

/* Créditos e endereço no rodapé. */
.rodape .creditos span,
.rodape .creditos a {
  color: var(--rodape-texto);
}

/* Os mesmos ajustes, agora nos seletores que o site realmente usa. */
:root {
  --verde-texto: #47753F;         /* verde sobre papel: 4,4 → 5,0 */
  --festival-texto: #77604D;      /* marcas do festival: 4,1 → 5,3 */
}

/* Etiqueta em mono sobre fundo claro. */
.eyebrow {
  color: var(--verde-texto);
}

/* Sobre o fundo escuro ela volta ao verde claro. */
.hero .eyebrow,
.secao-escura .eyebrow,
.ficha-capa .eyebrow,
.maos .eyebrow,
.cad-topo .eyebrow,
.rodape .eyebrow {
  color: var(--verde-claro-texto);
}

/* Anos da lista de datas e mês do calendário. */
.datas .ano,
.ev-mes {
  color: var(--laranja-texto);
}

/* Marcas do cartão do festival, sobre o creme. */
.festival-txt .meta span {
  color: var(--festival-texto);
}

/* Números do Mãos de Marau e endereço do rodapé, sobre a ardósia. */
.maos-num span,
.marca-rodape p {
  color: var(--rodape-texto);
}

/* Últimos pontos abaixo de 4,5:1, todos texto pequeno. */

/* Comunidade do cartão de associado, verde sobre papel. */
.assoc .local {
  color: var(--verde-texto);
}

/* Chamada do evento dentro do destaque escuro. */
.destaque-rota-ir {
  color: var(--verde-claro-texto);
}

/* Caminho de navegação e voltar, sobre o escuro da capa. */
.ficha-migalha,
.ficha-migalha a,
.cad-volta {
  color: var(--rodape-texto);
}

/* Crédito da fotografia, sobre o papel. */
.credito {
  color: #64737E;
}

/* A linha em mono acima do título, nas fichas e nos cartões. */
.sub,
.texto > .sub,
.espaco-txt .sub {
  color: var(--verde-texto);
}

.hero .sub,
.secao-escura .sub,
.ficha-capa .sub,
.maos .sub,
.cad-topo .sub,
.rodape .sub {
  color: var(--verde-claro-texto);
}

/* Período de mandato dos ex-prefeitos. */
.prefeito-periodo {
  color: var(--laranja-texto);
}

/* Dias da programação de um evento. */
.prog-dia h4 {
  color: var(--laranja-texto);
}

/* Links verdes dentro dos cartões da coluna lateral. */
.conteudo-lado .cartao a:not(.btn) {
  color: var(--verde-texto);
}

/* A assinatura da AROK fica na faixa própria, logo abaixo. Aqui sobra só a
   linha da Secretaria, que passa a ficar centralizada. */
.rodape .creditos {
  justify-content: center;
  text-align: center;
}

/* ============================================================
   EX-PREFEITOS
   Mesmo trilho da linha do tempo. O que muda é o ponto: em vez
   da bolinha, o retrato. Enquanto a fotografia não chega, o
   espaço aparece com as iniciais, no tamanho e no recorte que
   a foto vai ocupar — trocar depois é só definir o retrato no
   registro do mandato.
   ============================================================ */

.tl-prefeitos .tl-item {
  margin-bottom: clamp(28px, 3.2vw, 44px);
}

/* O retrato ocupa o lugar do ponto. */
.prefeito-ponto {
  top: 18px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid var(--branco);
  background: var(--papel-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--linha), 0 12px 28px -18px rgba(38,49,59,.75);
}

.tl-prefeitos .tl-item[data-lado="esq"] .prefeito-ponto {
  right: -85px;
}

.tl-prefeitos .tl-item[data-lado="dir"] .prefeito-ponto {
  left: -85px;
}

.prefeito-ponto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* O espaço à espera da fotografia. */
.prefeito-iniciais {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  font-style: normal;
  letter-spacing: -.02em;
  color: var(--verde);
}

.tl-prefeitos .tl-item.ativo .prefeito-ponto {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(137,174,66,.55), 0 16px 34px -18px rgba(38,49,59,.8);
}

/* O fiozinho sai de mais longe, porque o retrato é maior. */
.tl-prefeitos .tl-item::before {
  top: 54px;
  width: 24px;
}

.tl-prefeitos .tl-item[data-lado="esq"]::before {
  right: -32px;
}

.tl-prefeitos .tl-item[data-lado="dir"]::before {
  left: -32px;
}

/* O cartão do mandato. */
.tl-cartao.prefeito-cartao {
  position: relative;
  padding-top: 26px;
}

.prefeito-cartao .prefeito-num {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--tinta-fraca);
}

.prefeito-cartao h3 {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta);
  line-height: 1.2;
  margin: 0 0 6px;
}

.prefeito-cartao .prefeito-periodo {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--laranja-texto);
  display: block;
  margin-bottom: 4px;
}

.prefeito-cartao .prefeito-vice {
  font-size: 14px;
  color: var(--tinta-fraca);
  margin: 0 0 14px;
}

.prefeito-texto p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--tinta-fraca);
}

.prefeito-texto p + p {
  margin-top: 12px;
}

.prefeito-texto strong {
  color: var(--tinta);
  font-weight: 700;
}

.prefeito-cartao .prefeito-acoes {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--papel);
  border-radius: 12px;
  border-left: 3px solid var(--verde-claro);
}

.prefeito-cartao .prefeito-acoes h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-texto);
  margin: 0 0 8px;
}

.prefeito-cartao .prefeito-acoes p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tinta-fraca);
  margin: 0;
}

.prefeito-cartao .prefeito-acoes strong {
  color: var(--tinta);
  font-weight: 700;
}

/* A marca que o nome deixou na cidade. */
.prefeito-cartao .prefeito-marca {
  color: var(--verde-texto);
  font-size: 12.5px;
  margin-top: 18px;
}

.prefeito-cartao .prefeito-marca svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@media (max-width: 900px) {
  .tl-prefeitos .tl-item {
    padding-left: 100px;
  }

  .tl-prefeitos .tl-item[data-lado="esq"] .prefeito-ponto,
  .tl-prefeitos .tl-item[data-lado="dir"] .prefeito-ponto {
    left: -24px;
    right: auto;
  }

  .tl-prefeitos .tl-item[data-lado]::before,
  .tl-prefeitos .tl-item[data-lado="esq"]::before,
  .tl-prefeitos .tl-item[data-lado="dir"]::before {
    left: 54px;
    right: auto;
    width: 22px;
  }
}

@media (max-width: 560px) {
  .prefeito-ponto {
    width: 58px;
    height: 58px;
  }

  .prefeito-iniciais {
    font-size: 19px;
  }

  .tl-prefeitos .tl-item {
    padding-left: 78px;
  }

  .tl-prefeitos .tl-item[data-lado="esq"] .prefeito-ponto,
  .tl-prefeitos .tl-item[data-lado="dir"] .prefeito-ponto {
    left: -16px;
  }

  .tl-prefeitos .tl-item[data-lado]::before {
    left: 44px;
    width: 18px;
  }
}

/* ============================================================
   ASSOCIADOS
   Qualquer artesão pode estar no site; nem todos integram o
   Mãos de Marau. O mesmo vale para a AMAC. O selo marca quem
   é associado, e a página da entidade mostra a lista.
   ============================================================ */

.selos-entidade {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.selo-entidade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}

.selo-entidade:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.45);
}

.selo-entidade strong {
  font-weight: 700;
  color: #fff;
}

.selo-entidade svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--verde-claro-texto);
}

/* Cartão de associado com retrato, na página da entidade. */
.assoc-pessoa .assoc-foto {
  display: block;
  margin: -20px -22px 4px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.assoc-pessoa .assoc-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}

.assoc-pessoa:hover .assoc-foto img {
  transform: scale(1.04);
}

/* A linha de créditos fica centralizada e ganha o link da política. */
.rodape .creditos a {
  color: var(--rodape-texto);
  text-decoration: none;
  border-bottom: 1px solid rgba(169,183,193,.35);
  transition: color .2s ease, border-color .2s ease;
}

.rodape .creditos a:hover {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}

/* O corpo editorial só previa h3. A política de privacidade usa h2 para as
   seções e listas para os itens; aqui eles ganham o mesmo ritmo. */
.artigo-corpo h2 {
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 44px 0 14px;
}

.artigo-corpo h2:first-child {
  margin-top: 0;
}

.artigo-corpo ul {
  margin: 16px 0 0;
  padding-left: 22px;
  list-style: disc;
}

.artigo-corpo ul li {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--tinta-fraca);
  margin-bottom: 8px;
}

.artigo-corpo ul li::marker {
  color: var(--verde-claro);
}

.artigo-corpo ul + p {
  margin-top: 20px;
}

/* ============================================================
   TEXTO SOBRE FUNDO ESCURO — três tons, não sete
   A prévia foi ganhando um cinza-claro diferente a cada seção:
   #EEF2F3 no banner, #E7EDF1 no Mãos de Marau e no cadastro,
   #C3CED6 na ficha, #B9C5CE no rodapé, #94A4B0 e #7E8F9C nos
   detalhes — estes dois abaixo de 4,5:1. Aqui viram uma escala
   de três degraus, com diferença de no máximo 3% em relação ao
   que já estava no ar, e todos passando em AA sobre a ardósia.
   ============================================================ */

:root {
  --claro-1: #E7EDF1;   /* texto forte sobre escuro — 9,4:1 */
  --claro-2: #C0CBD3;   /* texto corrente sobre escuro — 6,8:1 */
  --claro-3: #A9B7C1;   /* meta, etiquetas e créditos — 5,4:1 */
}

/* Degrau 1 — o texto que carrega a seção. */
.slide-txt,
.cad-topo,
.maos,
.bloco-secretaria,
.bloco-secretaria .campo label,
.bloco-secretaria .opcao {
  color: var(--claro-1);
}

/* Degrau 2 — parágrafos e resumos. */
.slide p,
.ficha-resumo,
.destaque-rota p,
.numero span,
.rodape,
.rodape li,
.rodape a,
.maos-txt p,
.cad-topo p {
  color: var(--claro-2);
}

/* Degrau 3 — o que é secundário: meta, migalha, créditos. */
.rodape p,
.marca-rodape p,
.maos-num span,
.ficha-migalha,
.ficha-migalha a,
.cad-topo .cad-volta,
.bloco-secretaria .bloco-cab p,
.bloco-secretaria .campo .ajuda,
.rodape .creditos,
.rodape .creditos span,
.rodape .creditos a {
  color: var(--claro-3);
}

/* O ícone das redes no rodapé acompanha o texto corrente. */
.rodape-social a {
  color: var(--claro-2);
}

/* ============================================================
   RITMO VERTICAL DAS SEÇÕES
   A home respira mais que as páginas internas, de propósito. O
   que não fazia sentido era a tela de cadastro começar 12px
   acima das demais.
   ============================================================ */

.cad-corpo {
  padding-top: clamp(48px, 5.5vw, 84px);
}

/* Cartão da coluna lateral e cartão da linha do tempo passam a
   ter o mesmo respiro interno. */
.tl-cartao {
  padding: 26px 26px 28px;
}

/* ============================================================
   CABEÇALHO NO CELULAR
   Antes: logotipo numa linha, os dois botões institucionais
   quebrando para a linha de baixo e a barra do menu numa
   terceira — 181px de cabeçalho antes de qualquer conteúdo,
   com um botão "Menu" de 35px de altura.
   Agora: uma linha só — logotipo à esquerda, os dois links
   como ícones e o botão do menu à direita, todos com 44px de
   área de toque.
   ============================================================ */

@media (max-width: 900px) {

  .barra-inst-in {
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 8px;
    flex-wrap: nowrap;
  }

  .barra-inst .marca {
    flex: 1;
    min-width: 0;
  }

  .barra-inst .marca svg {
    height: 38px;
    max-width: 100%;
  }

  /* No celular sai o link da Prefeitura: a barra tem espaço para dois
     alvos de 44px ao lado do logotipo, e o portal continua no rodapé,
     em Contato. No desktop ele fica. */
  .barra-inst .inst-link.prefeitura {
    display: none;
  }

  /* Os links institucionais viram ícones: o texto some, o alvo cresce. */
  .barra-inst .inst-links {
    gap: 8px;
    flex: none;
    flex-wrap: nowrap;
  }

  .barra-inst .inst-link {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
    border-radius: 12px;
  }

  .barra-inst .inst-link svg {
    width: 19px;
    height: 19px;
  }

  /* A barra do menu perde a altura extra e o botão vira um alvo de verdade. */
  .barra-nav-in {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 10px;
  }

  .abre-menu {
    min-height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--branco);
    border-color: rgba(47,60,74,.2);
    color: var(--tinta);
    font-size: 12.5px;
  }

  /* O traço triplo, desenhado em CSS para não mexer na marcação. */
  .abre-menu::after {
    content: "";
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    flex: none;
  }

  .abre-menu[aria-expanded="true"] {
    background: var(--ardosia);
    border-color: var(--ardosia);
    color: #fff;
  }

  /* Itens do menu aberto com altura de toque confortável. */
  .menu > li > a,
  .menu button {
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  .submenu a {
    min-height: 42px;
    display: flex;
    align-items: center;
  }
}

/* ============================================================
   ÁREA DE TOQUE NO CELULAR
   O mínimo confortável é 44px. Onde o desenho pede um elemento
   fino — as barras do carrossel, os links de lista do rodapé —
   o alvo cresce por dentro, com o desenho intacto.
   ============================================================ */

@media (max-width: 900px) {

  /* Barras do carrossel: a barra continua com 4px, o alvo passa a 44px. */
  .barras {
    max-width: none;
    align-items: center;
  }

  .barra {
    height: 44px;
    padding: 20px 0;
    background-color: transparent;
    background-clip: content-box;
    box-sizing: border-box;
  }

  .barra::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255,255,255,.22);
  }

  .barra i {
    position: relative;
    z-index: 1;
  }

  /* Links de lista do rodapé: mais respiro entre um e outro. */
  .rodape ul {
    gap: 2px;
  }

  .rodape li a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* Ícones de rede do rodapé. */
  .rodape-social a {
    width: 44px;
    height: 44px;
  }

  /* Migalha, voltar e chamadas em linha. */
  .ficha-migalha a,
  .cad-volta,
  .link-fest,
  .nov-ler,
  .ver-ficha {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Campo de arquivo do formulário. */
  .jet-form-builder__field.file-field,
  .jet-form-builder input[type="file"] {
    min-height: 46px;
    padding: 11px 12px;
  }

  /* As três marcas do Mãos de Marau ficavam espremidas lado a lado. */
  .maos-num {
    gap: 22px 26px;
  }

  .maos-num div {
    min-width: calc(50% - 13px);
  }

  /* Os rótulos em mono menores que 11px ficam difíceis no celular. */
  .assoc .local,
  .credito,
  .prefeito-acoes h4,
  .tl-era span {
    font-size: 11.5px;
  }
}

@media (max-width: 900px) {

  /* O logotipo é o caminho de volta para a home: alvo cheio. */
  .barra-inst .marca {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Link da política, na linha de créditos. */
  .rodape .creditos a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .rodape .creditos {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 20px;
  }
}

@media (max-width: 900px) {
  /* Chip de serviço ligado: verde puro sobre o fundo de 9% de verde dá 4,2:1. */
  .chip-on {
    color: var(--verde-texto);
  }

  /* Botões de filtro das listagens. */
  .filtro {
    min-height: 42px;
  }
}

@media (max-width: 900px) {
  /* Tarjas que são link — os selos de tipo na ficha de um local. */
  a.tag {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   CARTÕES DA COLUNA LATERAL DENTRO DO CONTEÚDO
   Nas páginas editoriais a marcação da lateral está no corpo do
   post, e o wpautop do WordPress insere um <br> a cada quebra de
   linha — inclusive entre o ícone e o texto. Esse <br> virava o
   segundo item da grade de duas colunas e empurrava o texto para
   a coluna de 19px do ícone, uma palavra por linha.
   Aqui as duas posições são fixadas e o <br> intruso some.
   ============================================================ */

.dados li > svg {
  grid-column: 1;
  grid-row: 1;
}

.dados li > span {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.dados li > br {
  display: none;
}

/* ============================================================
   RODAPÉ
   As colunas de links viraram <details>. No desktop o resumo é
   só o título de sempre, sem seta e sem cursor de clique — nada
   muda. No celular os dois blocos longos entram fechados.
   ============================================================ */

.rodape-bloco > summary {
  list-style: none;
  cursor: default;
}

.rodape-bloco > summary::-webkit-details-marker {
  display: none;
}

.rodape-bloco > summary h5 {
  margin: 0;
}

@media (max-width: 900px) {

  /* A marca, o endereço e as redes ficam centralizados. */
  .marca-rodape {
    text-align: center;
  }

  .marca-rodape .rodape-marcas,
  .marca-rodape > a,
  .marca-rodape svg {
    margin-left: auto;
    margin-right: auto;
  }

  .marca-rodape p {
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }

  .rodape-social {
    justify-content: center;
  }

  /* O resumo vira um botão de verdade: linha inteira, seta e toque. */
  .rodape-bloco > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 2px;
    border-top: 1px solid rgba(255,255,255,.12);
    list-style: none;
  }

  .rodape-bloco > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--claro-3);
    border-bottom: 2px solid var(--claro-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
    flex: none;
  }

  .rodape-bloco[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .rodape-bloco > ul {
    padding-bottom: 10px;
  }

  /* A grade perde o vão grande entre blocos: agora eles se encostam. */
  .rodape-grid {
    gap: 0;
    padding-bottom: 32px;
  }

  .marca-rodape {
    margin-bottom: 26px;
  }

  .rodape {
    padding-top: 44px;
  }
}

@media (max-width: 900px) {
  /* Botões de compartilhar de uma matéria. */
  .compartilhar a {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   PROPORÇÃO DAS FOTOGRAFIAS
   O WordPress escreve width e height no <img>. Onde a folha só
   define a largura, o navegador usa a altura do atributo — a
   foto era esticada na vertical. Numa das fotos da linha do
   tempo, 800×641 virava 235×641.
   Com height auto a imagem preenche a largura do cartão e
   mantém a forma.
   ============================================================ */

figure.hist img {
  height: auto;
}

/* ============================================================
   FAIXA DO MANDATO
   A imagem do portal com o prefeito, o vice e os dois nomes.
   Entra como cabeçalho do cartão, encostada nas bordas.
   ============================================================ */

/* Dentro do cartão da linha do tempo a faixa sangra até as bordas — daí as
   margens negativas, que casam com os 26px de recheio do cartão. Solta, na
   ficha do mandato, ela é um bloco comum: sem isso vazava 2px para fora da
   coluna de texto. */
.prefeito-faixa {
  margin: 0 0 22px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 13px;
  overflow: hidden;
}

.tl-item .prefeito-faixa {
  margin: -26px -26px 20px;
  border: 0;
  border-bottom: 1px solid var(--linha);
  border-radius: 13px 13px 0 0;
}

.prefeito-faixa img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {

  .tl-prefeitos .tl-item,
  .tl-prefeitos .tl-item[data-lado] {
    padding-left: 54px;
  }

  .prefeito-ponto {
    top: 25px;
    width: 15px;
    height: 15px;
    border: 3px solid var(--verde-claro);
    background: var(--papel);
    box-shadow: none;
  }

  .tl-prefeitos .tl-item[data-lado="esq"] .prefeito-ponto,
  .tl-prefeitos .tl-item[data-lado="dir"] .prefeito-ponto {
    left: 6px;
    right: auto;
  }

  .prefeito-ponto img,
  .prefeito-iniciais {
    display: none;
  }

  .tl-prefeitos .tl-item.ativo .prefeito-ponto {
    transform: scale(1.5);
    box-shadow: 0 0 0 7px rgba(137,174,66,.16);
  }

  .tl-prefeitos .tl-item::before {
    top: 32px;
  }

  .tl-prefeitos .tl-item[data-lado]::before,
  .tl-prefeitos .tl-item[data-lado="esq"]::before,
  .tl-prefeitos .tl-item[data-lado="dir"]::before {
    left: 23px;
    right: auto;
    width: 23px;
  }
}

@media (max-width: 560px) {
  .tl-prefeitos .tl-item,
  .tl-prefeitos .tl-item[data-lado] {
    padding-left: 54px;
  }

  .tl-prefeitos .tl-item[data-lado="esq"] .prefeito-ponto,
  .tl-prefeitos .tl-item[data-lado="dir"] .prefeito-ponto {
    left: 6px;
  }

  .tl-prefeitos .tl-item[data-lado]::before {
    left: 23px;
    width: 23px;
  }
}

/* ============================================================
   O RETRATO FICA NO CARTÃO, NÃO NO TRILHO
   A faixa do mandato já mostra o rosto do prefeito, com o do
   vice e os dois nomes. O retrato no trilho repetia a mesma
   fotografia a 40px de distância. No trilho volta o ponto da
   linha do tempo, igual ao da página de datas.
   ============================================================ */

.prefeito-ponto {
  top: 25px;
  width: 15px;
  height: 15px;
  border: 3px solid var(--verde-claro);
  background: var(--papel);
  box-shadow: none;
  overflow: visible;
}

.prefeito-ponto img,
.prefeito-iniciais {
  display: none;
}

.tl-prefeitos .tl-item.ativo .prefeito-ponto {
  transform: scale(1.5);
  box-shadow: 0 0 0 7px rgba(137,174,66,.16);
}

.tl-prefeitos .tl-item::before {
  top: 32px;
}

/* A posição do ponto e do traço de ligação é a do trilho central, que só
   existe no desktop. Estas regras valiam em qualquer largura e vinham
   depois das do celular, com a mesma força: abaixo de 900px, o ponto dos
   mandatos do lado direito ia para left:-55px — fora da tela, longe do
   trilho. Achado na varredura de 29/09/2026. */
@media (min-width: 901px) {

  .tl-prefeitos .tl-item[data-lado="esq"] .prefeito-ponto {
    right: -55px;
  }

  .tl-prefeitos .tl-item[data-lado="dir"] .prefeito-ponto {
    left: -55px;
  }

  .tl-prefeitos .tl-item::before {
    width: 32px;
  }

  .tl-prefeitos .tl-item[data-lado="esq"]::before {
    right: -40px;
  }

  .tl-prefeitos .tl-item[data-lado="dir"]::before {
    left: -40px;
  }
}

/* A etiqueta de categoria do cartão herdava a cor de destaque do próprio
   cartão, e duas delas — laranja e verde claro — não davam leitura sobre
   o branco. Agora a cor de destaque segue no traço e a etiqueta usa o tom
   de texto correspondente. */

.artista .cat {
  color: var(--cor-texto, var(--verde-texto));
}

/* Chip de serviço ligado, em qualquer largura. */
.chip-on {
  color: var(--verde-texto);
}

/* ============================================================
   AGENDA DE EVENTOS
   A página abre com o próximo evento e segue com a lista na
   ordem em que as coisas acontecem, separada por mês.
   ============================================================ */

.conteudo-topo {
  padding-bottom: 0;
}

.conteudo-agenda {
  padding-top: clamp(40px, 4.5vw, 64px);
}

.cab-agenda {
  max-width: 640px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.cab-agenda h2 {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin-bottom: 10px;
}

.cab-agenda p {
  color: var(--tinta-fraca);
  font-size: 16.5px;
  line-height: 1.7;
}

/* ------------------------------------------------ o cartão do destaque
   A paleta creme-terra-verde é a identidade do Festival Nacional do
   Salame. Quando o destaque é outro evento, o cartão usa a paleta do
   site. Outro evento com identidade própria ganha um bloco como o do
   Festival, com o seu data-marca. */

.festival:not([data-marca="festival-do-salame"]) {
  --fest-creme: var(--papel-2);
  --fest-terra: var(--laranja-texto);
  --fest-verde: var(--verde-texto);
}

.festival:not([data-marca="festival-do-salame"]) .festival-txt h2,
.festival:not([data-marca="festival-do-salame"]) .festival-txt h3 {
  color: var(--tinta);
}

.festival:not([data-marca="festival-do-salame"]) .festival-txt p {
  color: var(--tinta-fraca);
}

.festival:not([data-marca="festival-do-salame"]) .festival .meta,
.festival:not([data-marca="festival-do-salame"]) .meta {
  color: var(--tinta-fraca);
}

.festival-txt h2 {
  font-family: var(--display);
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #22301A;
  line-height: 1.15;
}

/* ------------------------------------------------ eventos ligados a um
   local ou a uma entidade */

.ev-ligados {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-ligados a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.ev-ligados a:hover {
  border-color: rgba(137,174,66,.55);
  background: var(--branco);
}

.ev-ligados-quando {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  flex: none;
  min-width: 96px;
}

.ev-ligados-nome {
  font-weight: 600;
  color: var(--tinta);
  flex: 1;
  min-width: 0;
}

.ev-ligados svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--tinta-fraca);
}

@media (max-width: 560px) {
  .ev-ligados a {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .ev-ligados-quando {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   MENU DO CABEÇALHO, EDITÁVEL NO PAINEL
   A marcação é a mesma de antes; o que muda é a origem — agora
   vem de Aparência › Menus. O item da página em que a pessoa
   está ganha a classe .atual.
   ============================================================ */

.menu > li.atual > a {
  color: var(--verde-texto);
}

.menu > li.atual > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--verde-claro);
}

.menu > li {
  position: relative;
}

.submenu li.atual > a {
  color: var(--verde-texto);
  font-weight: 600;
}

@media (max-width: 900px) {
  .menu > li.atual > a::after {
    left: 8px;
    right: auto;
    width: 18px;
    bottom: 8px;
  }
}

/* ============================================================
   BUSCA
   Botão no cabeçalho, painel que desce, e a página de
   resultados agrupada por tipo.
   ============================================================ */

.busca-abre {
  cursor: pointer;
  font-family: var(--corpo);
}

.busca-abre[aria-expanded="true"] {
  background: var(--ardosia);
  border-color: var(--ardosia);
  color: #fff;
}

.busca-painel {
  border-top: 1px solid var(--linha);
  background: var(--papel-2);
  padding: 18px 0 22px;
}

.busca-painel[hidden] {
  display: none;
}

.busca-rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-texto);
  margin-bottom: 9px;
}

.busca-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.busca-linha:focus-within {
  border-color: rgba(137,174,66,.7);
  box-shadow: 0 0 0 4px rgba(137,174,66,.14);
}

.busca-icone {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--tinta-fraca);
}

.busca-icone svg {
  width: 19px;
  height: 19px;
}

.busca-campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--corpo);
  font-size: 16px;
  color: var(--tinta);
  padding: 10px 0;
}

.busca-campo:focus {
  outline: none;
}

.busca-campo::placeholder {
  color: #7C8A94;
}

.busca-enviar {
  flex: none;
  padding: 11px 20px;
  font-size: 14px;
}

/* ------------------------------------------------ página de resultados */

.busca-capa {
  background: var(--ardosia);
  padding: clamp(40px, 5vw, 66px) 0 clamp(30px, 3.6vw, 46px);
  color: var(--claro-2);
}

.busca-capa h1 {
  font-family: var(--display);
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  margin: 14px 0 0;
  line-height: 1.15;
}

.busca-capa h1 em {
  font-style: normal;
  color: var(--verde-claro-texto);
}

.busca-capa-form {
  margin-top: 22px;
  max-width: 660px;
}

.busca-capa .busca-rotulo {
  color: var(--claro-3);
}

.busca-capa .busca-linha {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
}

.busca-capa .busca-linha:focus-within {
  border-color: rgba(157,195,83,.8);
  box-shadow: 0 0 0 4px rgba(157,195,83,.16);
}

.busca-capa .busca-campo {
  color: #fff;
}

.busca-capa .busca-campo::placeholder {
  color: var(--claro-3);
}

.busca-capa .busca-icone {
  color: var(--claro-3);
}

.busca-filtros {
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.filtro-conta {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: .72;
  margin-left: 3px;
}

.busca-grupo.oculto {
  display: none;
}

.busca-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.busca-item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 14px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.busca-item:hover {
  border-color: rgba(137,174,66,.55);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.busca-foto {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--papel-2);
  position: relative;
}

.busca-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.busca-foto .ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--verde), var(--ardosia));
}

.busca-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.busca-selo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-texto);
}

.busca-txt h3 {
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--tinta);
  margin: 0;
}

.busca-txt h3 a {
  color: inherit;
  text-decoration: none;
}

.busca-txt h3 a:hover {
  color: var(--verde-texto);
}

.busca-txt p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta-fraca);
  margin: 0;
}

.busca-dica {
  margin-top: 10px;
}

@media (max-width: 900px) {
  /* No celular o botão vira só o ícone, como os outros do cabeçalho. */
  .busca-abre-txt {
    display: none;
  }

  .busca-linha {
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px;
  }

  .busca-campo {
    flex: 1 1 60%;
    padding: 8px 4px;
    min-height: 40px;
  }

  .busca-enviar {
    flex: 1 1 100%;
    min-height: 46px;
  }

  .busca-item {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .busca-item {
    grid-template-columns: 1fr;
  }

  .busca-foto {
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------ as listas de data
   A coluna da data era fixa. "23/03 a 27/04" não cabia nos 62px do
   celular e quebrava em quatro linhas. Abaixo de 900px a coluna cresce
   com o conteúdo até 40% da linha: as datas seguem alinhadas entre si,
   porque a medida vale para o grid inteiro, e o texto ao lado nunca é
   espremido, que é o que minmax(0, 1fr) garante. O desktop fica como
   está — lá a coluna fixa dá o ritmo da lista. */
@media (max-width: 900px) {
  .prog-dia li,
  .datas li {
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  /* Numa tela estreita a data sobe para a própria linha. */
  .prog-dia li,
  .datas li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* O traço que separa os dias de uma programação longa. Vem das notícias da
   Prefeitura, onde o separador era uma fileira de sublinhados — texto que
   não quebra e esticava a página no celular. */
.artigo-corpo hr,
.artigo-corpo .sep-dia {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: 26px 0;
}

/* Um endereço longo colado no corpo do texto — um formulário do Google, por
   exemplo — não tem onde quebrar e estica a página inteira no celular. O
   corpo do artigo passa a quebrar qualquer palavra que não caiba. */
.artigo-corpo,
.artigo-corpo p,
.artigo-corpo li,
.artigo-corpo td,
.ficha-texto,
.busca-txt {
  overflow-wrap: anywhere;
}

/* ============================================================
   O CALENDÁRIO DE EVENTOS

   Três níveis de cadastro, três desenhos:

     destaque    o cartão grande no topo — é o .festival, acima.
     principal   .cal-card, cartão com foto, resumo e dados.
     secundario  .cal-linha, uma linha: data, nome e local.

   Dois ritmos. O mês corrente e o seguinte abrem em .cal-mes--foco,
   com os cartões no tamanho cheio. Os dez meses restantes entram na
   .cal-grade, e lá o mesmo .cal-card se recolhe numa linha com
   miniatura — mesma marcação, outro desenho.

   Mês vazio continua na grade: é o que faz aquilo parecer calendário.
   Quem some com ele é o filtro, no navegador.

   Estas classes são próprias da agenda. A versão anterior reusava
   .nov e .nov-foto do cartão de notícia, e a regra
   .nov .nov-foto { aspect-ratio: 16/10 } da folha da prévia esticava
   a foto para 488px dentro de uma coluna de 160px — ela cobria o texto.
   ============================================================ */

/* ------------------------------------------------ a barra de meses */

.cal-meses {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--linha);
  scrollbar-width: thin;
}

.cal-mes-btn {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  padding: 9px 10px 8px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--branco);
  text-decoration: none;
  font-family: var(--mono);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.cal-mes-btn:hover {
  border-color: rgba(137,174,66,.6);
  transform: translateY(-1px);
}

.cal-mes-btn-nome {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
}

.cal-mes-btn-ano {
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--tinta-fraca-texto);
}

.cal-mes-btn-n {
  margin-top: 3px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--verde-texto);
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

/* Mês sem evento fica discreto, mas continua clicável. */
.cal-mes-btn.vazio {
  background: transparent;
  border-style: dashed;
}

.cal-mes-btn.vazio .cal-mes-btn-nome {
  color: var(--tinta-fraca-texto);
}

.cal-mes-btn.vazio .cal-mes-btn-n {
  background: var(--claro-2);
  color: var(--tinta);
}

.cal-filtros {
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

/* ------------------------------------------------ o título de cada mês */

.cal-mes-tit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 16px;
}

.cal-mes-nome {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta);
  text-transform: capitalize;
}

.cal-mes-ano {
  font-family: var(--mono);
  color: var(--tinta-fraca-texto);
}

.cal-mes-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-texto);
}

.cal-mes-nada {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-fraca-texto);
}

/* ------------------------------------------------ o mês em foco */

.cal-mes--foco {
  margin-bottom: clamp(34px, 4vw, 52px);
}

.cal-mes--foco .cal-mes-nome {
  font-size: clamp(26px, 3vw, 36px);
}

.cal-mes--foco .cal-mes-ano {
  font-size: 15px;
}

.cal-mes--foco .cal-mes-tit {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--verde-claro);
}

.cal-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}

/* ------------------------------------------------ o cartão do principal */

.cal-card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(38,49,59,.04);
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}

.cal-card:hover {
  box-shadow: var(--sombra);
  border-color: rgba(137,174,66,.55);
  transform: translateY(-2px);
}

.cal-card-foto {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--papel-2);
  overflow: hidden;
}

/* A moldura tem proporção fixa e a foto preenche cortando pelo centro:
   cadastro com foto em pé, deitada ou quadrada sai do mesmo tamanho. */
.cal-card-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}

.cal-card:hover .cal-card-foto img {
  transform: scale(1.04);
}

.cal-card-foto .ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--verde), var(--ardosia));
}

.cal-card-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px 18px;
  min-width: 0;
}

.cal-card-tipo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cor, var(--verde-texto));
}

.cal-card-txt h4 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--tinta);
}

.cal-card-txt h4 a {
  color: inherit;
  text-decoration: none;
}

.cal-card-txt h4 a:hover {
  color: var(--verde-texto);
}

.cal-card-txt p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta-fraca-texto);
}

.cal-card-dados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cal-card-dados li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-fraca-texto);
}

.cal-card-dados svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 1px;
  color: var(--verde-texto);
}

.cal-card-ler {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-texto);
}

.cal-card-ler svg {
  width: 15px;
  height: 15px;
  transition: transform .3s ease;
}

.cal-card:hover .cal-card-ler svg {
  transform: translateX(4px);
}

/* ------------------------------------------------ a linha do secundário */

.cal-linhas {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal-linha a {
  display: grid;
  grid-template-columns: fit-content(30%) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--cor, var(--verde-claro));
  border-radius: 10px;
  background: var(--branco);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.cal-linha a:hover {
  background: var(--papel);
  border-color: rgba(137,174,66,.5);
  border-left-color: var(--cor, var(--verde-claro));
}

.cal-linha-data {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor, var(--verde-texto));
  white-space: nowrap;
}

.cal-linha-nome {
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta);
  min-width: 0;
}

.cal-linha-onde {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca-texto);
}

.cal-linha-onde svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.cal-linha a > svg {
  width: 15px;
  height: 15px;
  color: var(--verde-texto);
  transition: transform .3s ease;
}

.cal-linha a:hover > svg {
  transform: translateX(3px);
}

/* ------------------------------------------------ o resto do ano */

.cal-resto-tit {
  margin: clamp(30px, 3.4vw, 46px) 0 18px;
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--linha);
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta);
}

.cal-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-items: start;
}

.cal-grade .cal-mes {
  padding: 16px 18px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
}

.cal-grade .cal-mes--vazio {
  background: transparent;
  border-style: dashed;
}

.cal-grade .cal-mes-tit {
  margin-bottom: 12px;
}

.cal-grade .cal-mes-nome {
  font-size: 17px;
}

.cal-grade .cal-mes-ano,
.cal-grade .cal-mes-n {
  font-size: 10.5px;
}

.cal-grade .cal-cartoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Na grade do ano o cartão se recolhe: miniatura quadrada à esquerda,
   nome e data à direita. O resumo e o "ver o evento" saem. */
.cal-grade .cal-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  box-shadow: none;
}

.cal-grade .cal-card:hover {
  transform: none;
}

.cal-grade .cal-card-foto {
  aspect-ratio: 1;
  border-radius: 7px;
}

.cal-grade .cal-card-txt {
  padding: 0;
  gap: 2px;
}

.cal-grade .cal-card-txt h4 {
  font-size: 14.5px;
}

.cal-grade .cal-card-txt p,
.cal-grade .cal-card-tipo,
.cal-grade .cal-card-ler {
  display: none;
}

/* No compacto sobra a data: o mês já é o contexto, e o nome do local
   quebrava em duas linhas dentro de um cartão de 52px de altura. */
.cal-grade .cal-card-onde {
  display: none;
}

.cal-grade .cal-card-dados li {
  font-size: 10px;
}

.cal-grade .cal-linhas {
  margin-top: 8px;
}

.cal-grade .cal-linha a {
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  gap: 4px 10px;
  padding: 8px 10px;
  border-radius: 8px;
}

.cal-grade .cal-linha-nome {
  font-size: 14px;
}

.cal-grade .cal-linha-onde,
.cal-grade .cal-linha a > svg {
  display: none;
}

/* Escondido pelo filtro. */
.cal-mes.oculto,
.cal-card.oculto,
.cal-linha.oculto,
.cal-mes-btn.oculto {
  display: none;
}

/* ------------------------------------------------ o calendário no celular

   Abaixo de 760px o cartão do mês em foco continua inteiro, mas numa
   coluna só; a linha do secundário quebra em duas alturas, com a data
   em cima; e a grade do ano vira uma coluna. A barra de meses continua
   rolando na horizontal, que é o gesto certo para ela. */

@media (max-width: 760px) {
  .cal-cartoes {
    grid-template-columns: minmax(0, 1fr);
  }

  .cal-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Duas alturas: em cima a data e o local, em texto miúdo; embaixo o
     nome. A seta ocupa a terceira coluna, nas duas alturas.

     A coluna do local precisa de minmax(0, 1fr): com `auto`, um local
     longo — "Parque Municipal Lauro Ricieri Bortolon" — media a coluna
     inteira e sobrava 15px para o nome do evento. */
  .cal-linha a {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 11px 14px;
  }

  .cal-linha-data {
    grid-row: 1;
    grid-column: 1;
  }

  .cal-linha-onde {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    align-items: flex-start;
  }

  .cal-linha-onde svg {
    margin-top: 2px;
  }

  .cal-linha-nome {
    grid-row: 2;
    grid-column: 1 / 3;
  }

  .cal-linha a > svg {
    grid-row: 1 / -1;
    grid-column: 3;
    align-self: center;
  }

  .cal-mes-btn {
    min-width: 58px;
  }
}

/* ------------------------------------------------ o destaque na largura toda

   Na home o cartão do destaque vive numa coluna estreita, ao lado da lista,
   e a foto 16/9 em cima do texto cai bem. Na página de eventos ele ocupa a
   largura inteira: 16/9 em 1192px dá 670px só de foto, e o cartão chegava a
   1056px de altura — mais que uma tela. Aqui ele vira duas colunas, com a
   foto ao lado do texto, e fica em torno de 420px.

   A regra é do `.conteudo-topo`, que só existe na página de eventos: a home
   continua exatamente como está. */

@media (min-width: 900px) {
  .conteudo-topo .festival {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .conteudo-topo .festival-capa {
    aspect-ratio: auto;
    min-height: 100%;
  }

  /* O escurecido desce da base para a direita: é de onde vem o texto agora. */
  .conteudo-topo .festival-capa::after {
    background: linear-gradient(120deg, rgba(36,84,36,.10) 0%, rgba(36,84,36,.34) 55%, rgba(28,38,20,.72) 100%);
  }

  .conteudo-topo .festival-txt {
    justify-content: center;
    padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px);
    gap: 15px;
  }

  .conteudo-topo .festival-txt h2 {
    font-size: clamp(28px, 2.8vw, 40px);
  }

  .conteudo-topo .festival-txt p {
    font-size: 16.5px;
    line-height: 1.7;
  }
}

/* ------------------------------------------------ "Isto é sobre"

   No pé de uma notícia, as etiquetas do que ela trata: o evento, o local,
   a entidade, a rota. É a ida do vínculo; a volta é o bloco "Novidades"
   que aparece na página de cada um deles. */

.chips-vinculo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.chips-vinculo-rotulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca-texto);
  margin-right: 2px;
}

.chip-vinculo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.chip-vinculo .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor, var(--verde));
  flex: none;
}

.chip-vinculo:hover {
  border-color: var(--cor, var(--verde));
  background: var(--papel);
}

/* ============================================================
   O RITMO DA FICHA NO CELULAR

   A prévia punha a coluna lateral antes do texto abaixo de
   1000px (`.conteudo-lado { order: -1 }`). Na prévia aquilo era
   um cartão ou dois. Hoje são quatro — dados, "veja também",
   "voltar para a galeria" e "falar com a Secretaria" — e o
   artigo passou a começar depois de 1034px na Casa da Cultura,
   1397px no Festival do Salame e 1909px em "A cidade". Quem
   abre a página de um lugar lê "Voltar para a galeria" antes
   de uma linha sobre o lugar.

   O texto volta a vir primeiro. O que a lateral trazia de útil
   logo de cara — a data e o local de um evento — passou para a
   linha de fatos da capa, em `.ficha-capa-meta`.
   ============================================================ */

@media (max-width: 1000px) {
  .conteudo-lado {
    order: 1;
  }
}

/* ------------------------------------------------ os fatos na capa */

.ficha-capa-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--claro-2);
}

.ficha-capa-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ficha-capa-meta span + span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde-claro);
  flex: none;
  margin-right: 10px;
}

/* ------------------------------------------------ blocos colados

   A ficha técnica encostava no parágrafo anterior: vão de 0px
   entre `.artigo-corpo` e a tabela, no celular e no desktop. */

.texto > .tabela-dados,
.texto > .artigo-corpo + .tabela-dados,
.texto > .espaco-mini,
.texto > .titulo-espaco + .tabela-dados {
  margin-top: 26px;
}

.texto > .tabela-dados + * {
  margin-top: 26px;
}

/* A marca do evento é um cartão solto dentro do texto, não uma
   marca sobreposta à capa: sem a variante `--solta` a margem
   negativa de -48px a puxava por cima da linha de cima. */
.texto > .espaco-marca {
  margin: 0 0 22px;
  max-width: 260px;
}

/* ------------------------------------------------ o destaque da rota

   Duas colunas — logotipo e texto — num cartão de 280px deixavam 134px
   para o texto: quatro palavras por linha, 384px de altura. Abaixo de
   620px o logotipo sobe e o texto fica com a largura inteira. */

@media (max-width: 620px) {
  .destaque-rota {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .destaque-rota > img {
    max-width: 120px;
  }
}

/* ------------------------------------------------ o popup do Elementor

   O aviso do prazo de cadastro. O desenho vem do próprio Elementor; o que
   entra aqui é o que o painel dele não resolve.

   O botão de fechar vinha com 15×15px — menos da metade do alvo mínimo de
   toque. A área cresce para 44px; o ícone continua do mesmo tamanho. */

.elementor-popup-modal .dialog-close-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elementor-popup-modal .dialog-close-button i,
.elementor-popup-modal .dialog-close-button svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ============================================================
   BANNER DA HOME — o texto nunca fica maior que a caixa
   Cada slide era absoluto dentro de uma caixa de altura fixa,
   min(78vh, 640px), e o .hero corta o que passa. Com título longo
   ou tela baixa o texto não cabia: o botão era cortado e descia
   para baixo das barras do carrossel, presas ao pé do banner.
   Medido em 29/09/2026: a 1280×610 e a 1366×657 os quatro slides
   tinham o botão cortado; no full HD, o primeiro já o tinha sobre
   as barras.
   ============================================================ */

/* Os slides passam a dividir a mesma célula de grade. A altura do
   banner vira a do slide mais alto — nunca menor que a do desenho
   original — e é a mesma em todos. */
.slides {
  display: grid;
}

.slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

/* No celular o marau.css tirava da tela o slide inativo com
   display:none, e o banner mudava de altura a cada troca — até 69px
   a 360×740, empurrando a página a cada sete segundos. Agora o
   inativo fica na célula, escondido só pela opacidade, como no
   desktop; de quebra, a troca passa a ser por esmaecimento. */
@media (max-width: 900px) {
  .slide {
    display: grid;
  }
}

@media (min-width: 901px) {

  /* Em tela baixa o título acompanha a altura, não só a largura: num
     notebook de 1366×657 o título de 68px tomava a dobra inteira. */
  .slide h1 {
    font-size: clamp(34px, min(5.4vw, 8vh), 68px);
  }

  .slide-txt {
    gap: clamp(14px, 2.6vh, 22px);
    padding-top: clamp(32px, min(6vw, 7vh), 86px);
    /* As barras ficam presas ao pé do banner, a 21px da borda. O respiro
       de baixo nunca é menor que 64px, para o botão não passar por cima. */
    padding-bottom: max(64px, clamp(32px, min(6vw, 7vh), 86px));
  }
}

/* ============================================================
   CARTÃO DE ROTA — a área clicável fica presa ao cartão
   O link do título estica um ::after com inset:0 por cima do
   cartão inteiro, para o cartão todo ser clicável. Isso só
   funciona se o cartão for posicionado — e o .rota não era.
   A área ia para o primeiro ancestral posicionado:
     - antes da animação de entrada, a grade .rotas, que tem
       transform: cada cartão cobria os três, e o último ganhava
       — qualquer clique levava a Caminhos dos Sinos;
     - depois dela, o próprio <html>: a área cobria a primeira
       tela da página, e o botão do banner passava a levar a
       Caminhos dos Sinos. A foto do cartão deixava de ser link.
   Achado na varredura de 29/09/2026. O .nov (notícias) já era
   posicionado e nunca teve o problema.
   ============================================================ */

.rota {
  position: relative;
}

/* O selo com a marca da rota senta 40px sobre a foto do cartão, de
   propósito. Mas é só imagem, sem link: onde cobria a foto, o toque não
   levava a lugar nenhum. Transparente ao toque, deixa passar para a foto,
   que leva à rota. Achado na varredura de 29/09/2026. */
.espaco-marca {
  pointer-events: none;
}