/*
 * Campanha 5544 — estilo da página pública da campanha.
 *
 * Entra depois da quarto.css (é dependência dela no enqueue) e só na página
 * do modelo "Campanha 5544". O depoimento é preto, papel e serifa de máquina;
 * aqui é o azul da campanha, a Montserrat pesada em caixa alta, o amarelo do
 * grifo e o grafismo de caneta. Nada nesta folha vale fora desta página: tudo
 * está debaixo de .camp ou da classe de modelo no <body>.
 *
 * As medidas seguem a régua da arte de rua: azul chapado com textura de
 * papel, título em caixa alta com o traço amarelo por baixo, e os desenhos
 * (estrelas, rabiscos, seta) soltos no fundo, longe do texto.
 */

:root{
  --camp-azul:#235da6;
  --camp-azul-escuro:#164277;
  --camp-azul-claro:#9ebade;
  --camp-amarelo:#f9bd00;
  --camp-papel:#f7f6f3;
  --camp-tinta:#12233a;
  --camp-cinza:#5a6b7f;
  --camp-max:1180px;
}

/* --------------------------------------------------------------------------
   O corpo da página

   A quarto.css pinta o body de preto e escolhe Arial: as duas coisas são do
   depoimento. Aqui o fundo é papel claro e a letra é a Montserrat que o tema
   já carrega (assets/fonts), a mesma da marca e da página de links.
   -------------------------------------------------------------------------- */
body.page-template-page-campanha{
  background:var(--camp-papel);
  color:var(--camp-tinta);
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
}

/* O grão fica — é o mesmo papel da arte —, mas mais leve: sobre o azul
   chapado ele aparece muito mais do que aparecia sobre o preto. */
body.page-template-page-campanha::before{opacity:.018}

/* A quarto.css desenha o depoimento em <section>: 110px de respiro e um fio
   escuro no topo de cada uma. As seções desta página têm respiro próprio, e
   o fio apareceria como um risco preto no meio do papel. O :where zera as
   duas coisas com peso zero — qualquer regra desta folha passa por cima. */
:where(.camp) section{padding:0;border-top:0}

.camp h2,
.camp p,
.camp dl,
.camp dd{margin-top:0}

/* O :where zera o peso: este é um padrão, e qualquer cartão ou botão desta
   folha precisa poder dizer a própria cor sem disputar especificidade. Com
   ".camp a" o reset ganhava do .camp-canal e deixava o rótulo branco no
   branco. */
:where(.camp) a{color:inherit}

/* --------------------------------------------------------------------------
   Peças que se repetem: o marcador, o título, o grifo e os botões
   -------------------------------------------------------------------------- */

/* A mesma régua do depoimento — fio e rótulo em caixa alta —, agora em
   branco sobre o azul. A variante --escuro é para as lâminas de papel. */
.camp-marcador{
  display:flex;align-items:center;gap:14px;
  margin:0 0 26px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgb(255 255 255 / 82%);
}
.camp-marcador i{display:block;width:46px;height:2px;background:var(--camp-amarelo)}
.camp-marcador b{font-weight:700}
.camp-marcador--escuro{color:var(--camp-azul)}
.camp-marcador--escuro i{background:var(--camp-azul)}

.camp-titulo{
  margin:0 0 26px;
  font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.015em;
  font-weight:800;text-transform:uppercase;
  color:var(--camp-azul);
  /* O traço amarelo do grifo fica em z-index -1, atrás da letra. Sem uma
     camada própria aqui ele desceria atrás do fundo da seção e sumiria. */
  isolation:isolate;
}
.camp-titulo--claro{color:#fff}

/* O traço amarelo por baixo da palavra, como no slogan manuscrito e no aviso
   de obra. Fica atrás do texto, encostado na base da letra: passa por cima da
   cedilha e do rabo do "ç" sem cortar nada, porque é translúcido no eixo. */
.camp-grifo{position:relative;display:inline-block;white-space:nowrap}
.camp-grifo::after{
  content:"";position:absolute;z-index:-1;
  left:-.06em;right:-.06em;bottom:.06em;height:.28em;
  background:var(--camp-amarelo);
  border-radius:.14em;
}

.camp-botao{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  border-radius:999px;border:2px solid transparent;
  font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  text-align:center;text-decoration:none;
  transition:background-color 180ms ease,color 180ms ease,transform 160ms ease,box-shadow 180ms ease;
}
.camp-botao--amarelo{background:var(--camp-amarelo);color:var(--camp-azul-escuro)}
.camp-botao--vazado{border-color:rgb(255 255 255 / 55%);color:#fff}

@media (hover:hover) and (pointer:fine){
  .camp-botao--amarelo:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgb(18 35 58 / 28%)}
  .camp-botao--vazado:hover{background:#fff;color:var(--camp-azul);border-color:#fff}
}
.camp-botao:focus-visible{outline:3px solid var(--camp-amarelo);outline-offset:3px}
.camp-botao--amarelo:focus-visible{outline-color:var(--camp-azul-escuro)}

@media (prefers-reduced-motion:reduce){
  .camp-botao{transition:none}
}

/* --------------------------------------------------------------------------
   A barra do topo

   A do depoimento não é impressa nesta página (header.php); esta é a dela.
   Fica fixa e some no celular a lista do meio: sobram a marca e o botão do
   zap, que é o que a pessoa foi ali fazer.
   -------------------------------------------------------------------------- */
.camp-barra{
  position:fixed;left:0;right:0;top:0;z-index:1000;
  background:rgb(35 93 166 / 92%);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgb(255 255 255 / 12%);
}
.camp-barra__interno{
  width:min(calc(100% - 40px),var(--camp-max));margin:auto;
  min-height:74px;display:flex;align-items:center;gap:28px;
}
.camp-barra__marca{flex:0 0 auto;display:block;line-height:0}
.camp-barra__marca img{
  width:auto;height:34px;display:block;
  /* A marca é azul sobre transparente: no azul da barra ela sumiria. */
  filter:brightness(0) invert(1);
}
.camp-barra__links{
  flex:1 1 auto;display:flex;justify-content:center;gap:26px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgb(255 255 255 / 78%);
}
.camp-barra__links a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.camp-barra__links a:hover{color:#fff;border-bottom-color:var(--camp-amarelo)}
.camp-barra__zap{flex:0 0 auto;min-height:44px;padding:0 20px;font-size:12px}

/* --------------------------------------------------------------------------
   A capa
   -------------------------------------------------------------------------- */
.camp-capa{
  position:relative;overflow:hidden;
  padding:150px 0 90px;
  background:
    radial-gradient(120% 90% at 50% 38%,rgb(255 255 255 / 10%),rgb(255 255 255 / 0%) 62%),
    var(--camp-azul);
  color:#fff;
}

/* A textura de papel do azul. É a mesma ideia do grão do body — ruído
   gerado, não arquivo —, só que maior e mais forte, porque na arte o azul é
   papel pintado e não superfície lisa. */
.camp-capa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

.camp-capa__interno{
  position:relative;z-index:2;
  width:min(calc(100% - 40px),var(--camp-max));margin:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
}

/* A marca e o slogan são arte azul-escura sobre transparente: foram feitos
   para o cartão claro da página de links. Sobre o azul chapado eles somem.
   O filtro derruba a cor e devolve tudo em branco — que é como a campanha
   assina em cima do azul, o mesmo branco do aviso de obra. */
.camp-capa__marca{
  display:block;width:min(100%,360px);height:auto;margin:0 0 22px;
  filter:brightness(0) invert(1);
}
/* O slogan não passa pelo filtro: ele tem duas tintas, e derrubar as duas
   levaria junto o círculo amarelo em volta de "Recomeçar", que é a assinatura
   da arte. Em vez disso existe um segundo arquivo, slogan-branco.png, com o
   manuscrito em branco e o círculo intacto. */
.camp-capa__slogan{display:block;width:min(62%,210px);height:auto;margin:0 0 30px}
.camp-capa__chamada{
  max-width:30em;margin:0 0 32px;
  font-size:clamp(16px,1.5vw,19px);line-height:1.55;
  color:rgb(255 255 255 / 88%);
}
.camp-capa__acoes{display:flex;flex-wrap:wrap;gap:14px}

/* A figura repete o empilhamento da arte: a estrela atrás, o recorte na
   frente dela e o número atravessando por baixo, encostado na foto. */
.camp-capa__figura{position:relative;display:grid;place-items:end center}
.camp-capa__estrelona{
  position:absolute;z-index:1;
  width:78%;height:auto;left:-6%;top:-4%;
  opacity:.5;
}
.camp-capa__foto{position:relative;z-index:2;width:min(100%,470px);height:auto;display:block}
.camp-capa__numero{
  position:relative;z-index:3;
  width:min(96%,430px);height:auto;display:block;
  margin-top:-11%;
  filter:drop-shadow(0 14px 26px rgb(9 26 48 / 35%));
}

/* Os desenhos de caneta. Ficam nos cantos e nunca por cima do texto: por
   isso vivem numa camada z-index 1, abaixo do .camp-capa__interno. */
.camp-capa__grafismo{position:absolute;inset:0;z-index:1;pointer-events:none}
.camp-capa__grafismo svg{position:absolute}

.camp-risco{color:rgb(255 255 255 / 55%)}
.camp-risco--rabisco-1{left:4%;top:26%;width:clamp(70px,9vw,120px)}
.camp-risco--rabisco-2{right:4%;top:13%;width:clamp(80px,11vw,150px)}
.camp-risco--onda{left:9%;bottom:22%;width:clamp(70px,9vw,130px)}
.camp-risco--seta{
  color:var(--camp-amarelo);
  right:22%;top:14%;width:clamp(28px,3.4vw,52px);
}

.camp-estrela{fill:#fff;width:16px;height:16px}
.camp-estrela--1{left:26%;top:19%;width:22px;height:22px}
.camp-estrela--2{left:13%;bottom:36%;width:20px;height:20px}
.camp-estrela--3{right:8%;top:36%;width:14px;height:14px}
.camp-estrela--4{right:26%;bottom:24%;width:13px;height:13px}
.camp-estrela--5{left:40%;bottom:11%;width:15px;height:15px}

/* --------------------------------------------------------------------------
   Quem é — papel claro, texto de leitura e os quatro números

   GUARDADO: a seção saiu da página em 08/09/2026 e está em
   assets/src/campanha-secoes-removidas.php. O estilo fica aqui de propósito,
   como o do capítulo do relato no quarto.css: quem devolver o <section> não
   precisa refazer o desenho.
   -------------------------------------------------------------------------- */
.camp-quem{padding:96px 0 90px;background:var(--camp-papel)}
.camp-quem__interno{
  width:min(calc(100% - 40px),var(--camp-max));margin:auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;
}
.camp-quem__texto p{
  margin:0 0 1.15em;
  font-size:17px;line-height:1.68;color:#3c4a5c;
}
.camp-quem__texto p:last-child{margin-bottom:0}
.camp-quem__texto b{color:var(--camp-tinta)}
.camp-quem__texto a{
  color:var(--camp-azul);font-weight:700;
  border-bottom:2px solid var(--camp-amarelo);text-decoration:none;
}

/* Os mesmos quatro marcos da trajetória do depoimento, aqui em cartão. */
.camp-numeros{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.camp-numeros li{
  padding:22px 20px;
  background:#fff;border:1px solid #e4e6ea;border-radius:16px;
  box-shadow:0 1px 0 rgb(18 35 58 / 4%);
}
.camp-numeros b{
  display:block;margin-bottom:6px;
  font-size:clamp(34px,4vw,46px);line-height:1;font-weight:800;
  color:var(--camp-azul);
}
.camp-numeros span{display:block;font-size:13px;line-height:1.45;color:var(--camp-cinza)}

/* --------------------------------------------------------------------------
   Fotos — o que estiver na pasta, num quadro de retrato
   -------------------------------------------------------------------------- */
/* A galeria passou a vir logo depois da capa (a seção "Quem é" saiu), então
   ela carrega o próprio respiro de cima — antes ele vinha da seção anterior. */
.camp-fotos{padding:96px 0;background:var(--camp-papel)}
.camp-fotos__interno{width:min(calc(100% - 40px),var(--camp-max));margin:auto}

.camp-galeria{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;
}
.camp-galeria__item{
  margin:0;
  position:relative;overflow:hidden;
  border-radius:18px;background:var(--camp-azul-claro);
  /* O quadro manda, e a foto se ajusta: fotos de campanha chegam em todo
     tamanho, e sem isso a grade viraria um dente de serra. */
  aspect-ratio:3/4;
}
.camp-galeria__item img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.camp-galeria__legenda{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 14px;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:linear-gradient(to top,rgb(9 26 48 / 78%),rgb(9 26 48 / 0%));
}

/* --------------------------------------------------------------------------
   Canais — a lista de links oficiais, no azul
   -------------------------------------------------------------------------- */
.camp-canais{
  position:relative;
  padding:92px 0;
  background:var(--camp-azul-escuro);
  color:#fff;
}
.camp-canais__interno{width:min(calc(100% - 40px),var(--camp-max));margin:auto}

.camp-canais__lista{
  list-style:none;margin:0;padding:0;
  /* Duas colunas, e não auto-fit: com quatro canais o auto-fit fazia três em
     cima e um sozinho embaixo. */
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}

/* O botão branco de cantos redondos da página de links, agora com uma linha
   de apoio embaixo do rótulo: aqui há espaço para dizer o que há do outro
   lado, e quem confere a página precisa saber para onde o link vai. */
.camp-canal{
  display:flex;align-items:center;gap:16px;
  min-height:84px;padding:16px 20px;
  background:#fff;border-radius:20px;
  color:var(--camp-azul);text-decoration:none;
  transition:background-color 180ms ease,transform 160ms ease,box-shadow 180ms ease;
}
.camp-canal__bolha{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--camp-azul);color:#fff;
  display:grid;place-items:center;
}
.camp-canal__icone{
  width:24px;height:24px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.camp-canal__texto{display:block;min-width:0}
.camp-canal__texto b{
  display:block;font-size:15px;font-weight:800;letter-spacing:.01em;
  text-transform:uppercase;
}
.camp-canal__texto span{
  display:block;margin-top:3px;
  font-size:13px;line-height:1.4;font-weight:500;color:var(--camp-cinza);
}
.camp-canal__seta{margin-left:auto;font-size:20px;color:var(--camp-azul-claro)}

@media (hover:hover) and (pointer:fine){
  .camp-canal:hover{background:var(--camp-amarelo);transform:translateY(-2px);box-shadow:0 10px 24px rgb(9 26 48 / 30%)}
  .camp-canal:hover .camp-canal__texto span,
  .camp-canal:hover .camp-canal__seta{color:var(--camp-azul-escuro)}
}
.camp-canal:focus-visible{outline:3px solid var(--camp-amarelo);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .camp-canal{transition:none}
}

/* --------------------------------------------------------------------------
   Transparência — a ficha de identificação do anunciante

   GUARDADO junto com a de "Quem é", pelo mesmo motivo e no mesmo arquivo. A
   identificação em si não sumiu da página: desceu para a faixa do rodapé.
   -------------------------------------------------------------------------- */
.camp-transparencia{padding:92px 0;background:#fff}
.camp-transparencia__interno{width:min(calc(100% - 40px),var(--camp-max));margin:auto}
.camp-transparencia__resumo{
  max-width:58ch;margin:0 0 34px;
  font-size:16px;line-height:1.65;color:#3c4a5c;
}

/* Cada dado é uma ficha inteira, com a própria borda. A primeira versão era
   uma grade de divisores — fundo cinza aparecendo pelos vãos —, e quando o
   número de dados não fechava a última linha sobrava uma célula cinza vazia
   no fim da tabela. Ficha solta não tem última linha para fechar. */
.camp-ficha{
  margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.camp-ficha > div{
  padding:18px 20px;background:#fff;
  border:1px solid #e4e6ea;border-radius:14px;
}
.camp-ficha dt{
  margin:0 0 6px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--camp-cinza);
}
.camp-ficha dd{margin:0;font-size:15px;font-weight:700;color:var(--camp-tinta);word-break:break-word}
.camp-ficha dd a{color:var(--camp-azul);text-decoration:none;border-bottom:2px solid var(--camp-amarelo)}

/* --------------------------------------------------------------------------
   Rodapé — a faixa da propaganda eleitoral
   -------------------------------------------------------------------------- */
.camp-rodape{padding:34px 0 40px;background:var(--camp-tinta);color:rgb(255 255 255 / 72%)}
.camp-rodape__interno{
  width:min(calc(100% - 40px),var(--camp-max));margin:auto;text-align:center;
}
.camp-rodape__faixa{
  margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
}
/* Os contatos que vinham da ficha de Transparência, agora em uma linha só. */
.camp-rodape__contato{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 22px;margin:0 0 12px;padding:0;
  font-size:12px;font-weight:700;
}
.camp-rodape__contato a{
  color:#fff;text-decoration:none;
  border-bottom:2px solid var(--camp-amarelo);
}
.camp-rodape__contato a:hover{color:var(--camp-amarelo)}
.camp-rodape__contato:empty{display:none}

.camp-rodape__credito{margin:0;font-size:12px}
.camp-rodape__credito a{color:var(--camp-azul-claro);text-decoration:none;border-bottom:1px solid currentColor}

/* --------------------------------------------------------------------------
   Telas estreitas

   A capa vira uma coluna só: primeiro quem fala, depois a figura. Os desenhos
   de caneta perdem os dois de dentro — no telefone eles cairiam no meio do
   texto — e ficam só os das bordas.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .camp-barra__links{display:none}
  .camp-barra__interno{justify-content:space-between;gap:16px}

  .camp-capa{padding:120px 0 70px}
  .camp-capa__interno{grid-template-columns:1fr;gap:44px;text-align:center}
  .camp-capa__marca{margin-inline:auto}
  .camp-capa__slogan{margin-inline:auto}
  .camp-capa__chamada{margin-inline:auto}
  .camp-capa__acoes{justify-content:center}
  /* Só o da capa: nas outras lâminas o texto continua alinhado à esquerda, e
     um marcador centrado sobre um título à esquerda fica torto. */
  .camp-capa .camp-marcador{justify-content:center}
  .camp-capa__numero{margin-top:-12%}

  .camp-estrela--1,
  .camp-estrela--5,
  .camp-risco--seta{display:none}

  .camp-canais__lista{grid-template-columns:1fr}
  .camp-quem__interno{grid-template-columns:1fr;gap:40px}
  .camp-quem,
  .camp-canais,
  .camp-transparencia{padding:70px 0}
  .camp-fotos{padding-bottom:70px}
}

@media (max-width:560px){
  .camp-barra__zap{padding:0 14px;font-size:11px;letter-spacing:.02em}
  .camp-barra__marca img{height:28px}

  .camp-numeros{grid-template-columns:1fr}
  .camp-galeria{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .camp-quem__texto p{font-size:16px}
  .camp-canal{min-height:76px;padding:14px 16px;gap:13px}
}