/* =============================================================================
   Filipe Arnon 22022 — sistema visual "ladrilho"
   =============================================================================
   São Luís é a cidade dos azulejos, e o material impresso da campanha já traz
   uma faixa de ladrilho. O site parte daí: superfícies quadradas, borda dura,
   sombra sólida deslocada (impresso, não app) e faixa de azulejo separando
   seções. Nada de canto arredondado nem sombra borrada.

   A faixa de identidade (azulejo + bandeira + igreja + mapa do MA) é o
   elemento que amarra as páginas: aparece sob a barra do blog e do gerador,
   abrindo a seção do grupo e fechando o link na bio.

   Fundos:
     link na bio            → azul-marinho do azulejo (peça isolada, de perfil)
     escuta, blog, gerador  → branco de cal

   As cores continuam vindo do config.js: app.js injeta --navy, --amarelo etc.
   em :root. Os tokens abaixo consomem essas variáveis, então mexer no config
   continua mudando o site inteiro.
   ========================================================================== */

/* Fonte do logotipo da campanha, auto-hospedada. É a mesma do santinho, da
   bandeira e do adesivo — usar outra no site quebrava a identidade.
   ⚠️ Conferir a licença de webfont do Amsi Pro antes de considerar definitivo. */
@font-face{
  font-family:"Amsi Pro Narrow";
  src:url("fonts/AmsiProNarw-Black.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- vindas do config.js (valores iguais aqui p/ não piscar antes do JS) --- */
  --navy:#0050C0; --navy-escuro:#001E52; --navy-medio:#003C96;
  --verde:#009C3B; --verde-claro:#2FD07A; --amarelo:#FFC90A;
  --azul-botao:#2F7FE0; --azul-claro:#7FB6FF; --rosa:#FF5C8A;

  /* --- tokens do sistema --- */
  /* Tintas do azulejo da identidade, amostradas da faixa do santinho */
  --tinta:      #000050;   /* azul-marinho do motivo do azulejo */
  --azulejo:    #002CB0;   /* azul-royal do fundo do azulejo */
  --azulejo-2:  var(--navy);
  --cal:        #EEF1F7;   /* branco de cal, puxado p/ azul — não é cinza */
  --cal-pura:   #FFFFFF;
  --ouro:       var(--amarelo);
  --mata:       var(--verde);
  --pedra:      #56658A;   /* neutro azulado p/ texto secundário */

  --borda:      2px solid var(--tinta);
  --lastro:     4px 4px 0 var(--tinta);      /* sombra sólida, sem blur */
  --lastro-alt: 7px 7px 0 var(--tinta);

  /* Amsi Pro Narrow é a fonte do logotipo — só tem o peso Black, então serve
     display. Archivo cobre a interface; Source Serif 4, o texto de leitura. */
  --display: "Amsi Pro Narrow", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --corpo:   "Source Serif 4", Georgia, "Times New Roman", serif;
  /* O número da urna é Montserrat no material da campanha, e não a
     fonte do logotipo. Fica num token próprio para não se perder. */
  --numero:  "Montserrat", "Archivo", Arial, sans-serif;

  --medida: 65ch;          /* largura de leitura confortável */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--ui);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.icon{width:24px;height:24px;display:block;fill:currentColor}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px}

/* honeypot: fora da tela, mas não display:none — bot ignora display:none */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- peças reutilizadas ---------- */
.ladrilho{                       /* superfície quadrada com borda e lastro */
  background:var(--cal-pura);
  border:var(--borda);
  box-shadow:var(--lastro);
}
/* Divisória: a faixa de identidade da própria campanha, extraída da arte
   impressa. Um período = azulejo + bandeira + igreja + mapa do MA. Repetir
   por período inteiro é o que mantém o encaixe sem emenda. */
.faixa-identidade{
  height:34px;
  background:url("img/faixa-identidade.png") repeat-x center/auto 34px;
  border-top:var(--borda);
  border-bottom:var(--borda);
}
.rotulo{                         /* eyebrow / label de dado */
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* =========================== LINK NA BIO ================================= */
.bio{
  min-height:100dvh;
  background:var(--tinta);
  color:var(--cal);   /* a textura de azulejo vem mais abaixo */
  /* coluna, não linha: com display:flex padrão o rodapé compartilhado
     virava uma coluna ao lado do conteúdo em vez de ficar embaixo */
  display:flex;flex-direction:column;
}
.bio__wrap{
  width:100%;max-width:520px;margin:0 auto;padding:44px 18px 36px;
  display:flex;flex-direction:column;align-items:center;
}

.bio__avatar{
  position:relative;width:132px;height:132px;margin-bottom:22px;
  border:var(--borda);border-color:var(--cal);
  box-shadow:6px 6px 0 var(--azulejo);
}
.bio__avatar img{width:100%;height:100%;object-fit:cover}
.bio__avatar::after{             /* selo do número, canto inferior */
  content:attr(data-numero);   /* vem do config, não escrito aqui */
  position:absolute;right:-14px;bottom:-13px;
  background:var(--ouro);color:var(--tinta);
  font-family:var(--numero);font-size:13px;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  padding:5px 9px;border:2px solid var(--tinta);
}
.bio__nome{
  font-size:clamp(34px,9.5vw,54px);font-family:var(--display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.94;
  color:var(--cal-pura);text-align:center;text-wrap:balance;margin-bottom:14px;
  width:100%;
}
/* o logotipo entra no lugar do nome digitado; o fundo já é escuro aqui */
.bio__logo{width:min(100%,380px);height:auto;margin:0 auto 10px}
.bio__badge{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--tinta);background:var(--ouro);
  padding:9px 16px;margin-bottom:34px;text-align:center;line-height:1.4;
  border:2px solid var(--tinta);box-shadow:3px 3px 0 var(--azulejo);
}

/* Um link por linha: é página de link na bio, onde a pessoa varre a lista
   de cima a baixo. Em duas colunas ela precisa fazer ziguezague. */
.bio__links{
  width:100%;display:grid;gap:12px;
  grid-template-columns:1fr;
}
.card-link{
  display:flex;flex-direction:row;align-items:center;gap:16px;
  padding:16px 18px;
  background:var(--cal-pura);color:var(--tinta);
  border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--azulejo);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.card-link:first-child{          /* o canal abre a lista, em destaque */
  background:var(--mata);color:var(--cal-pura);
  border-color:var(--cal-pura);box-shadow:4px 4px 0 var(--ouro);
}
.card-link:hover{
  transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 var(--azulejo);
  background:var(--ouro);
}
.card-link:first-child:hover{background:var(--verde-claro);box-shadow:7px 7px 0 var(--ouro)}
.card-link__ic{flex:0 0 auto;display:grid;place-items:center}
.card-link__ic .icon{width:28px;height:28px}
.card-link__t{flex:1;font-size:17px;font-weight:700;line-height:1.25}
.card-link:first-child .card-link__t{font-size:18px}
.card-link__arrow{flex:0 0 auto;transition:transform .16s ease}
.card-link:hover .card-link__arrow{transform:translateX(5px)}

.bio .faixa-identidade{width:100%;margin-top:34px;border-color:var(--cal)}
.bio__footer{
  margin-top:20px;color:var(--azul-claro);font-size:13px;text-align:center;
  letter-spacing:.04em;
}

/* =========================== ESCUTA ====================================== */
.escuta{background:var(--cal);color:var(--tinta);overflow-x:hidden}

/* --- Hero: parede de azulejo com placa esmaltada ------------------------
   Substitui os arcos concêntricos do template. A parede usa o ladrilho real
   da identidade; a placa é montada por cima, como as placas esmaltadas do
   Centro Histórico de São Luís.                                          */
.hero{
  position:relative;
  padding:26px 16px 70px;
  background:var(--azulejo);
  border-bottom:var(--borda);
  overflow:hidden;
  isolation:isolate;
}
.parede{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;
  grid-template-columns:repeat(var(--cols,8),var(--lado,96px));
  grid-auto-rows:var(--lado,96px);
}
.parede i{
  display:block;
  background:url("img/azulejo.png") center/100% 100% no-repeat;
  opacity:0;transform:scale(.86);
  animation:assenta .55s cubic-bezier(.22,.8,.28,1) var(--d,0ms) forwards;
}
@keyframes assenta{to{opacity:1;transform:none}}

/* véu que escurece a parede o suficiente para a placa se destacar */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,
    rgba(0,0,80,.20) 0%, rgba(0,0,80,.68) 70%, rgba(0,0,80,.82) 100%);
}
.hero__in{position:relative;z-index:2}
.hero__top{display:flex;justify-content:center;gap:9px;margin-bottom:26px}
.soc{
  width:42px;height:42px;background:var(--cal-pura);color:var(--tinta);
  display:grid;place-items:center;border:2px solid var(--tinta);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.soc:hover{background:var(--ouro);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--tinta)}
.soc .icon{width:19px;height:19px}

/* No celular a placa fica centralizada; no computador ela encosta à
   esquerda — ver .hero__in em telas largas, mais abaixo. */
.placa{
  max-width:640px;margin:0 auto;text-align:center;
  background:var(--cal-pura);border:3px solid var(--tinta);
  box-shadow:9px 9px 0 var(--tinta);
  padding:0 0 clamp(24px,5vw,40px);
  animation:monta .6s cubic-bezier(.22,.8,.28,1) .35s backwards;
  overflow:hidden;
}
@keyframes monta{from{opacity:0;transform:translateY(-16px)}}
/* tarja escura no topo da placa: o logotipo tem letras brancas e some em
   fundo claro, então ele ganha o próprio campo */
.placa__marca{
  background:var(--tinta);
  padding:clamp(20px,4vw,30px) clamp(18px,4vw,38px);
  margin-bottom:clamp(22px,4vw,32px);
}
.placa__logo{width:min(100%,400px);height:auto;margin:0 auto}
.placa__titulo{display:block;margin:0;padding:0 clamp(18px,4vw,38px)}
.placa__acao{
  display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(34px,9.6vw,68px);color:var(--azulejo);
  line-height:.92;letter-spacing:-.02em;text-transform:uppercase;
}
/* medidor de voz: o sinal de que do outro lado tem alguém ouvindo */
.ouvindo{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:26px;margin:18px 0}
.ouvindo i{
  width:5px;height:100%;background:var(--mata);
  transform-origin:bottom;transform:scaleY(.22);
  animation:escutando 1.25s ease-in-out infinite;
}
.ouvindo i:nth-child(1){animation-delay:0s;   background:var(--mata)}
.ouvindo i:nth-child(2){animation-delay:.13s; background:var(--ouro)}
.ouvindo i:nth-child(3){animation-delay:.26s; background:var(--azulejo)}
.ouvindo i:nth-child(4){animation-delay:.39s; background:var(--mata)}
.ouvindo i:nth-child(5){animation-delay:.52s; background:var(--ouro)}
.ouvindo i:nth-child(6){animation-delay:.65s; background:var(--azulejo)}
.ouvindo i:nth-child(7){animation-delay:.78s; background:var(--mata)}
@keyframes escutando{
  0%,100%{transform:scaleY(.22)}
  50%    {transform:scaleY(1)}
}
.placa__linha{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pedra);display:flex;flex-direction:column;gap:6px;align-items:center;
  padding:0 clamp(18px,4vw,38px);
}
.placa__estado{
  font-family:var(--display);font-weight:900;letter-spacing:-.015em;
  font-size:clamp(30px,8.6vw,62px);color:var(--tinta);line-height:.92;
  border-bottom:7px solid var(--ouro);padding-bottom:.03em;
}

/* --- O caminho da mensagem --------------------------------------------- */
.caminho{background:var(--cal-pura);border-top:var(--borda);padding:52px 16px}
.caminho__in{max-width:1000px;margin:0 auto}
.caminho__titulo{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,4.6vw,40px);color:var(--tinta);text-align:center;
  line-height:1;margin-bottom:34px;text-wrap:balance;
}
.caminho__passos{
  list-style:none;display:grid;gap:20px;
  /* 220px faz os três passos caberem lado a lado já em ~760px de largura;
     com 250px o terceiro caía sozinho numa segunda linha */
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.passo{
  position:relative;background:var(--cal);
  border:var(--borda);box-shadow:var(--lastro);
  padding:26px 22px 22px;
}
.passo__n{
  position:absolute;top:-15px;left:20px;
  background:var(--ouro);color:var(--tinta);
  border:2px solid var(--tinta);padding:3px 10px;
  font-family:var(--numero);font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.passo__t{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:21px;color:var(--tinta);margin:8px 0 10px;line-height:1.05;
}
.passo__d{font-family:var(--corpo);color:var(--pedra);font-size:15.5px;line-height:1.6}

/* Formulário */
/* o cartão sobe sobre a parede, reforçando a ideia de placa montada.
   O recuo negativo precisa ser menor que o padding-bottom do .hero (70px) */
.form-wrap{position:relative;z-index:3;max-width:560px;margin:-46px auto 56px;padding:0 16px}
.form-card{
  background:var(--azulejo);border:var(--borda);box-shadow:var(--lastro-alt);
  padding:30px 24px;
}
.form-card h2{
  color:var(--cal-pura);text-align:center;font-family:var(--display);font-weight:900;
  font-size:clamp(16px,4.2vw,20px);text-transform:uppercase;letter-spacing:.01em;
  line-height:1.3;margin-bottom:24px;text-wrap:balance;
}
.field{margin-bottom:15px}
.field label{
  display:block;color:var(--cal-pura);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;
}
.req{color:var(--ouro)}
.field input,.field select,.field textarea{
  width:100%;border:2px solid var(--tinta);background:var(--cal-pura);
  color:var(--tinta);font-family:var(--ui);font-size:16px;
  padding:12px 14px;outline:none;
}
.field textarea{min-height:110px;resize:vertical}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A1B3D'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:4px 4px 0 var(--ouro);
}
.row{display:flex;gap:12px}
.row .field{flex:1;min-width:0}

/* --- Busca de cidade (combobox) ---
   A lista rola em vez de ser cortada: com 217 municípios, limitar o número
   de resultados esconderia exatamente a cidade pequena que a pessoa procura. */
.busca{position:relative}
.busca__lista{
  list-style:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% - 2px);
  background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro);
  max-height:min(46vh,300px);overflow-y:auto;overscroll-behavior:contain;
}
.busca__lista li{
  padding:13px 14px;cursor:pointer;color:var(--tinta);
  font-size:15px;line-height:1.3;border-bottom:1px solid #D8DFEE;
}
.busca__lista li:last-child{border-bottom:0}
.busca__lista li b{background:var(--ouro);font-weight:800}
.busca__lista li:hover,.busca__lista li.is-on{background:var(--azulejo);color:var(--cal-pura)}
.busca__lista li:hover b,.busca__lista li.is-on b{background:transparent;color:var(--ouro)}
.busca__vazio{color:var(--pedra);cursor:default;font-style:italic}
.busca__vazio:hover{background:transparent;color:var(--pedra)}
/* alvo de toque confortável no celular (mín. 44px) */
@media (max-width:560px){ .busca__lista li{padding:15px 14px;font-size:16px} }

/* só para leitor de tela */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.consent{
  display:flex;gap:10px;align-items:flex-start;margin:16px 0 12px;
  color:var(--cal-pura);font-size:13px;line-height:1.5;cursor:pointer;
}
.consent input{margin-top:2px;width:19px;height:19px;flex:0 0 auto;accent-color:var(--ouro)}
.consent a{color:var(--ouro);font-weight:700;text-decoration:underline}
.fineprint{color:rgba(255,255,255,.74);font-size:12px;line-height:1.6;margin-bottom:8px}
.fineprint a{color:var(--ouro);font-weight:700;text-decoration:underline}
.fineprint--mini{font-size:11px;color:rgba(255,255,255,.55)}
.btn-enviar{
  display:block;width:100%;margin:20px 0 0;cursor:pointer;
  background:var(--ouro);color:var(--tinta);
  font-family:var(--ui);font-weight:800;font-size:16px;
  text-transform:uppercase;letter-spacing:.14em;
  padding:15px 34px;border:2px solid var(--tinta);box-shadow:var(--lastro);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-enviar:hover:not(:disabled){transform:translate(-3px,-3px);box-shadow:var(--lastro-alt)}
.btn-enviar:disabled{opacity:.55;cursor:progress}
.form-msg{
  text-align:center;color:var(--cal-pura);margin-top:14px;
  font-size:14px;font-weight:600;min-height:20px;
}

/* Seção do grupo de WhatsApp */
.zap{position:relative;overflow:hidden;background:var(--mata);padding:0 0 40px;border-top:var(--borda)}
.zap::before{                    /* faixa de identidade abrindo a seção */
  content:"";display:block;height:34px;margin-bottom:34px;
  background:url("img/faixa-identidade.png") repeat-x center/auto 34px;
  border-bottom:var(--borda);
}
.zap__inner{
  max-width:1000px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;
}
.zap__foto{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:220px}
.zap__foto img{position:relative;z-index:1;max-height:320px;width:auto}
.zap__txt{text-align:left}
.zap__q{
  color:var(--tinta);font-family:var(--display);font-weight:900;
  font-size:clamp(17px,3.6vw,23px);text-transform:uppercase;
  line-height:1.2;margin-bottom:10px;text-wrap:balance;
}
.zap__marca{
  display:inline-flex;align-items:center;gap:.06em;
  font-size:clamp(30px,6.6vw,52px);font-family:var(--display);font-weight:900;
  color:var(--cal-pura);margin-bottom:12px;line-height:.95;
}
.zap__marca span{color:var(--cal-pura)}
.zap__marca .zapword{color:var(--ouro)}
.zap__desc{
  font-family:var(--corpo);color:var(--tinta);font-weight:500;
  font-size:clamp(15px,2.2vw,17px);line-height:1.6;max-width:44ch;margin:0 0 20px;
}
.zap__btn{
  display:inline-block;background:var(--tinta);color:var(--cal-pura);
  font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.12em;
  padding:14px 28px;border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--ouro);
  transition:transform .15s ease, box-shadow .15s ease;
}
.zap__btn:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ouro)}

/* Rodapé */
.foot{
  background:var(--tinta);padding:20px 16px;border-top:var(--borda);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.foot__soc{display:flex;gap:9px}
.foot__soc a{color:var(--cal);display:grid;place-items:center;width:34px;height:34px;transition:color .15s ease}
.foot__soc a:hover{color:var(--ouro)}
.foot__logo{
  color:var(--cal-pura);font-family:var(--display);font-weight:900;font-size:20px;
  text-transform:uppercase;letter-spacing:.02em;
}
.foot__logo .zapword{color:var(--ouro)}

/* =========================== BARRA E RODAPÉ (nav.js) =====================
   Compartilhados por Escuta, Blog, Gerador e Privacidade. A marca é sempre
   link para a home, e a faixa de identidade viaja logo abaixo da barra.
   ========================================================================= */
.barra{background:var(--tinta);position:sticky;top:0;z-index:30;border-bottom:var(--borda)}
.barra::after{
  content:"";display:block;height:26px;
  background:url("img/faixa-identidade.png") repeat-x center/auto 26px;
  border-top:var(--borda);
}
.barra__in{
  max-width:1160px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.barra__marca{display:block;flex:0 0 auto;line-height:0}
.barra__marca img{width:auto;height:34px}
.barra__marca:hover img{opacity:.85}
.barra__nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.barra__nav a{
  color:var(--cal-pura);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 12px;border:2px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
.barra__nav a:hover{border-color:var(--ouro);color:var(--ouro)}
.barra__nav a.is-atual{border-color:var(--ouro);color:var(--ouro)}

.rodape{background:var(--tinta);color:var(--cal);margin-top:auto}
.rodape .faixa-identidade{border-top:0}
.rodape__in{
  max-width:1160px;margin:0 auto;padding:26px 16px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.rodape__marca{line-height:0}
.rodape__marca img{width:auto;height:62px}
.rodape__nav{display:flex;gap:16px;flex-wrap:wrap}
.rodape__nav a{
  color:var(--azul-claro);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;transition:color .15s ease;
}
.rodape__nav a:hover{color:var(--ouro)}
.rodape__soc{display:flex;gap:10px}
.rodape__soc a{color:var(--cal);width:32px;height:32px;display:grid;place-items:center;transition:color .15s ease}
.rodape__soc a:hover{color:var(--ouro)}
.rodape .legal{color:var(--azul-claro);opacity:.75;padding-bottom:20px}

/* Faixa de tablet: com o selo do número a barra passou a quebrar em duas
   linhas antes de chegar no celular. Aperta antes de deixar quebrar. */
@media (max-width:900px){
  .barra__marca img{height:26px}
  .barra__numero{font-size:15px;padding:4px 7px 3px}
  .barra__nav{gap:0}
  .barra__nav a{padding:8px 8px;font-size:11px;letter-spacing:.06em}
  .barra__nav a::after{left:8px;right:8px}
}
@media (max-width:560px){
  .barra__in{padding:10px 12px;gap:8px}
  .barra__marca img{height:26px}
  .barra__nav a{padding:7px 8px;font-size:10px;letter-spacing:.08em}
  .rodape__in{justify-content:center;text-align:center}
}

/* =========================== BLOG ======================================== */
.blog{background:var(--cal);color:var(--tinta);min-height:100dvh;display:flex;flex-direction:column}
.blog__bar{background:var(--tinta);position:sticky;top:0;z-index:10;border-bottom:var(--borda)}
/* a faixa de identidade viaja logo abaixo da barra, como papel timbrado —
   é o que faz blog, gerador e escuta se lerem como o mesmo material */
.blog__bar::after,.ger__bar::after{
  content:"";display:block;height:26px;
  background:url("img/faixa-identidade.png") repeat-x center/auto 26px;
  border-top:var(--borda);
}
.blog__bar-in{
  max-width:1080px;margin:0 auto;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.blog__brand{
  color:var(--cal-pura);font-family:var(--display);font-weight:900;font-size:19px;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;
}
.blog__nav{display:flex;gap:7px}
.blog__nav a{
  color:var(--cal-pura);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 13px;border:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.blog__nav a:hover{border-color:var(--ouro);color:var(--ouro)}
.blog__main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:0 16px 64px}

.blog__hero{text-align:center;padding:52px 0 34px}
.blog__eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mata);margin-bottom:12px;
}
.blog__title{
  font-size:clamp(34px,7vw,64px);font-family:var(--display);font-weight:900;
  text-transform:uppercase;line-height:.94;letter-spacing:-.015em;
  color:var(--tinta);text-wrap:balance;
}
.blog__sub{
  font-family:var(--corpo);color:var(--pedra);font-size:17px;line-height:1.6;
  max-width:52ch;margin:14px auto 0;
}
.blog__accent{width:120px;height:6px;background:var(--ouro);margin:22px auto 0}

.blog__grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.post-card{
  display:flex;flex-direction:column;
  background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro);
  transition:transform .16s ease, box-shadow .16s ease;
}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:var(--lastro-alt)}
.post-card__cap{
  aspect-ratio:16/9;width:100%;object-fit:cover;
  background:var(--azulejo);border-bottom:var(--borda);
}
.post-card__body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-card__date{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mata);font-variant-numeric:tabular-nums;margin-bottom:9px;
}
.post-card__t{
  font-size:21px;font-family:var(--display);font-weight:900;line-height:1.15;
  color:var(--tinta);margin-bottom:10px;text-wrap:balance;
}
.post-card__r{
  font-family:var(--corpo);color:var(--pedra);font-size:15px;line-height:1.6;
  flex:1;margin-bottom:16px;
}
.post-card__more{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azulejo);display:inline-flex;align-items:center;gap:7px;
}
.post-card:hover .post-card__more{color:var(--tinta)}
.blog__empty{
  font-family:var(--corpo);text-align:center;color:var(--pedra);
  font-size:17px;padding:56px 16px;
}

/* Artigo */
.article{
  background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro-alt);
  max-width:820px;margin:34px auto 0;
}
.article__cap{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--azulejo);border-bottom:var(--borda)}
.article__in{padding:clamp(24px,5vw,52px)}
.article__date{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mata);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.article__title{
  font-size:clamp(28px,5.4vw,46px);font-family:var(--display);font-weight:900;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
  color:var(--tinta);margin-bottom:26px;text-wrap:balance;
}
.article__body{
  font-family:var(--corpo);color:#243154;font-size:18px;line-height:1.75;
  max-width:var(--medida);
}
.article__body h2{
  font-family:var(--display);font-size:24px;font-family:var(--display);font-weight:900;
  text-transform:uppercase;color:var(--tinta);margin:34px 0 12px;line-height:1.15;
}
.article__body h3{
  font-family:var(--display);font-size:19px;font-weight:700;
  color:var(--tinta);margin:26px 0 10px;
}
.article__body p{margin:0 0 18px}
.article__body a{color:var(--azulejo);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article__body a:hover{color:var(--tinta)}
.article__body ul,.article__body ol{margin:0 0 18px 22px}
.article__body li{margin-bottom:8px}
.article__body strong{font-weight:700;color:var(--tinta)}
.article__body blockquote{
  border-left:6px solid var(--ouro);background:var(--cal);
  padding:16px 20px;margin:0 0 20px;font-style:italic;color:var(--tinta);
}
.article__body img{border:var(--borda);margin:0 0 18px}
.article__body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--cal);border:1px solid #C9D3E6;padding:1px 5px;
}
.article__body pre{overflow-x:auto;background:var(--tinta);color:var(--cal);padding:16px;margin:0 0 18px}

.blog__backwrap{max-width:820px;margin:26px auto 0}
.article__back{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);background:var(--cal-pura);
  padding:12px 20px;border:var(--borda);box-shadow:4px 4px 0 var(--ouro);
  transition:transform .15s ease, box-shadow .15s ease;
}
.article__back:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ouro)}

/* =========================== GERADOR DE CARD =============================
   Mesma base do blog: fundo branco de cal, mesma barra de topo, mesmos
   ladrilhos. Antes esta página era escura e destoava de todo o resto.
   ========================================================================= */
.ger{background:var(--cal);color:var(--tinta);min-height:100dvh;display:flex;flex-direction:column}
.ger__bar{background:var(--tinta);border-bottom:var(--borda);position:sticky;top:0;z-index:10}
.ger__bar-in{max-width:1080px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ger__brand{font-family:var(--display);font-weight:900;font-size:19px;text-transform:uppercase;color:var(--cal-pura)}
.ger__nav{display:flex;gap:7px}
.ger__nav a{
  color:var(--cal-pura);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 13px;border:2px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
.ger__nav a:hover{border-color:var(--ouro);color:var(--ouro)}
.ger__main{flex:1;max-width:1080px;width:100%;margin:0 auto;padding:0 16px 64px}
.ger__head{text-align:center;padding:52px 0 34px}
.ger__head h1{
  font-size:clamp(30px,6vw,58px);font-family:var(--display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.96;color:var(--tinta);
  text-wrap:balance;
}
.ger__head p{font-family:var(--corpo);color:var(--pedra);margin:14px auto 0;font-size:17px;max-width:48ch}
.ger__card{
  display:flex;gap:34px;flex-wrap:wrap;
  background:var(--cal-pura);border:var(--borda);padding:clamp(20px,3vw,34px);
  box-shadow:var(--lastro-alt);
}
.ger__form{flex:1;min-width:min(100%,300px)}
.ger__field{margin-bottom:20px}
.ger__field:last-child{margin-bottom:0}
.ger__label{
  display:block;font-weight:700;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta);margin-bottom:9px;
}
.ger__input,.ger__textarea{
  width:100%;border:var(--borda);background:var(--cal-pura);color:var(--tinta);
  font-family:var(--ui);font-size:16px;padding:13px 14px;outline:none;
}
.ger__input::placeholder,.ger__textarea::placeholder{color:var(--pedra)}
.ger__textarea{resize:none;min-height:106px;text-transform:uppercase}
.ger__input:focus,.ger__textarea:focus{box-shadow:4px 4px 0 var(--ouro)}
.ger__hint{font-size:11px;color:var(--pedra);margin-top:8px;font-weight:500}
.ger__count{text-align:right;color:var(--pedra);font-size:12px;margin-top:8px;font-variant-numeric:tabular-nums}
.ger__fmt{display:flex;gap:8px;border:var(--borda);padding:6px;background:var(--cal)}
.ger__fmt button{
  flex:1;border:2px solid transparent;cursor:pointer;background:transparent;color:var(--pedra);
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;padding:12px;transition:.15s;
}
.ger__fmt button.is-on{background:var(--ouro);color:var(--tinta);border-color:var(--tinta)}
.ger__btn{
  display:block;width:100%;margin-top:24px;cursor:pointer;
  background:var(--ouro);color:var(--tinta);font-family:var(--ui);
  font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.14em;
  padding:16px;border:var(--borda);box-shadow:var(--lastro);
  transition:transform .15s ease,box-shadow .15s ease;
}
.ger__btn:hover{transform:translate(-3px,-3px);box-shadow:var(--lastro-alt)}
.ger__preview{flex:1;display:flex;justify-content:center;min-width:min(100%,260px)}
.ger__frame{width:100%;max-width:300px;border:var(--borda);background:var(--tinta);height:fit-content;box-shadow:var(--lastro)}
/* o canvas tem width=1080 no atributo; sem isto ele estoura a moldura */
.ger__frame canvas{display:block;width:100%;height:auto}

/* =========================== RODAPÉ LEGAL ================================ */
.legal{
  font-size:11px;line-height:1.5;letter-spacing:.06em;text-align:center;
  padding:16px;font-weight:600;font-variant-numeric:tabular-nums;
}
.foot .legal{flex-basis:100%;color:var(--azul-claro);padding:6px 0 0;opacity:.85}
.bio .legal{color:var(--azul-claro);width:100%;margin-top:8px;opacity:.75}
.blog .legal,.ger .legal{color:var(--pedra);background:var(--cal)}

/* =========================== REVEAL (anim.js) ============================ */
.reveal{opacity:0;transform:translateY(14px);will-change:transform,opacity}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .5s ease var(--d,0ms), transform .5s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}

/* =========================== RESPONSIVO ================================== */
/* Duas colunas no computador: placa à esquerda, formulário à direita,
   o conjunto centralizado. No celular vira coluna única. */
@media (min-width:980px){
  .hero{padding:38px 0 64px}
  .hero__in{
    max-width:1160px;margin:0 auto;padding:0 40px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
    gap:36px;align-items:start;
  }
  .hero__col{min-width:0}
  .hero__top{justify-content:flex-start;margin-bottom:22px}
  .placa{margin:0;text-align:left;max-width:none}
  .placa__marca{text-align:left}
  .placa__logo{margin:0}
  .placa__linha{align-items:flex-start;text-align:left}
  .ouvindo{justify-content:flex-start}
  .form-wrap{margin:0;padding:0;max-width:none}
  .form-card{max-width:none}
}

/* =========================== PÁGINA INICIAL ==============================
   Camadas: a arte oficial em toda a largura, o azulejo como textura de
   fundo nas seções escuras, e as peças montadas por cima com o mesmo
   lastro sólido do resto do site.
   ========================================================================= */
.inicio{background:var(--cal);color:var(--tinta);display:flex;flex-direction:column;min-height:100dvh}
.inicio #app{display:flex;flex-direction:column;min-height:100dvh}

.secao__titulo{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,5vw,46px);line-height:.98;color:var(--tinta);
  text-wrap:balance;margin-bottom:26px;
}

/* --- Capa: a arte da campanha em toda a largura --- */
.capa{position:relative;background:var(--tinta)}
.capa__arte{display:block;line-height:0}
.capa__arte img{width:100%;height:auto;display:block}
.capa__texto{
  background:var(--tinta);
  background-image:url("img/azulejo.png");
  background-size:120px;background-repeat:repeat;
  border-top:var(--borda);border-bottom:var(--borda);
  position:relative;
}
.capa__texto::before{                 /* véu para o texto ficar legível */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,80,.82),rgba(0,0,80,.92));
}
.capa__in{
  position:relative;max-width:1160px;margin:0 auto;
  padding:clamp(34px,5vw,60px) 16px clamp(38px,5vw,64px);
}
.capa__selo{
  display:inline-block;background:var(--mata);color:var(--cal-pura);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 14px;border:2px solid var(--cal-pura);margin-bottom:18px;
}
.capa__titulo{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,6.4vw,66px);line-height:.96;letter-spacing:-.015em;
  color:var(--cal-pura);max-width:16ch;text-wrap:balance;
}
.capa__sub{
  font-family:var(--corpo);color:var(--azul-claro);
  font-size:clamp(16px,2.1vw,20px);line-height:1.6;max-width:52ch;margin-top:16px;
}
.capa__acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.botao{
  display:inline-block;font-family:var(--ui);font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.1em;padding:15px 26px;
  border:2px solid var(--tinta);transition:transform .15s ease,box-shadow .15s ease;
}
.botao--ouro{background:var(--ouro);color:var(--tinta);box-shadow:4px 4px 0 var(--cal-pura)}
.botao--ouro:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--cal-pura)}
.botao--verde{background:var(--mata);color:var(--cal-pura);box-shadow:4px 4px 0 var(--ouro)}
.botao--verde:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ouro)}
.botao--vazado{background:transparent;color:var(--cal-pura);border-color:var(--cal-pura)}
.botao--vazado:hover{background:var(--cal-pura);color:var(--tinta)}

/* --- Números e cargos --- */
.numeros{background:var(--cal-pura);border-bottom:var(--borda)}
.numeros__in{
  max-width:1160px;margin:0 auto;padding:34px 16px;
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.numero{border-left:6px solid var(--ouro);padding-left:16px}
.numero__v{
  display:block;font-family:var(--numero);font-weight:800;
  font-size:clamp(30px,4.4vw,46px);line-height:1;color:var(--azulejo);
  font-variant-numeric:tabular-nums;
}
.numero__r{
  display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta);margin-top:8px;
}
.numero__n{font-family:var(--corpo);color:var(--pedra);font-size:14.5px;line-height:1.5;margin-top:8px}

/* --- Quem é + acordeão --- */
.quem{background:var(--cal);padding:clamp(40px,6vw,72px) 16px;position:relative;overflow:hidden}
.quem::before{                        /* textura de azulejo esmaecida */
  content:"";position:absolute;inset:0;
  background:url("img/azulejo.png") repeat;background-size:150px;
  opacity:.07;pointer-events:none;
}
.quem__in{
  position:relative;max-width:1160px;margin:0 auto;
  display:grid;gap:clamp(24px,4vw,54px);align-items:start;
}
.quem__resumo{
  font-family:var(--corpo);font-size:clamp(16px,2vw,19px);line-height:1.65;
  color:#243154;margin-bottom:26px;max-width:60ch;
}
.quem__foto{display:none}

.sanfona{display:flex;flex-direction:column;gap:12px}
.sanfona__item{background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro)}
.sanfona__item h3{margin:0}
.sanfona__cab{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(16px,2.2vw,21px);color:var(--tinta);
  padding:18px 20px;line-height:1.1;
}
.sanfona__cab:hover{background:var(--ouro)}
.sanfona__sinal{
  flex:0 0 auto;width:22px;height:22px;position:relative;
}
.sanfona__sinal::before,.sanfona__sinal::after{
  content:"";position:absolute;background:var(--azulejo);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.sanfona__sinal::before{width:20px;height:4px}
.sanfona__sinal::after{width:4px;height:20px;transition:transform .2s ease}
.sanfona__cab[aria-expanded="true"] .sanfona__sinal::after{transform:translate(-50%,-50%) scaleY(0)}
.sanfona__corpo{padding:0 20px 20px;border-top:2px solid var(--cal)}
.sanfona__corpo p{
  font-family:var(--corpo);font-size:16.5px;line-height:1.7;color:#243154;margin-top:16px;
}

/* --- Últimas notícias --- */
.ultimas{background:var(--cal-pura);border-top:var(--borda);padding:clamp(40px,6vw,72px) 16px}
.ultimas__in{max-width:1160px;margin:0 auto}
.ultimas__mais{margin-top:30px;text-align:center}

/* --- Fecho --- */
.fecho{
  background:var(--azulejo);
  background-image:url("img/azulejo.png");background-size:120px;
  border-top:var(--borda);position:relative;
}
.fecho::before{content:"";position:absolute;inset:0;background:rgba(0,0,80,.72)}
.fecho__in{
  position:relative;max-width:900px;margin:0 auto;
  padding:clamp(40px,6vw,72px) 16px;text-align:center;
}
.fecho__titulo{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,4.4vw,44px);line-height:1;color:var(--cal-pura);
  text-wrap:balance;margin-bottom:26px;
}
.fecho .capa__acoes{justify-content:center}

@media (min-width:900px){
  .quem__in{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .quem__foto{display:block;align-self:end}
  .quem__foto img{
    width:100%;height:auto;
    filter:drop-shadow(10px 10px 0 var(--ouro));
  }
}

/* =========================== CAMADAS E ANIMAÇÃO ==========================
   O site estava chapado: blocos de cor lisos, um do lado do outro. Aqui
   entram a textura de azulejo, as fotos e o movimento de entrada.
   ========================================================================= */

/* --- entrada por scroll (assets/anim.js, marcação [data-anima]) --- */
[data-anima]{will-change:transform,opacity}

/* --- Galeria de fotos da seção "Quem é" --- */
.galeria{
  display:grid;gap:14px;margin:0 0 34px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.galeria__item{
  position:relative;margin:0;overflow:hidden;
  border:var(--borda);box-shadow:var(--lastro);background:var(--tinta);
}
.galeria__item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.galeria__item:hover img{transform:scale(1.06)}
.galeria__item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,80,.92));
  color:var(--cal-pura);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:22px 12px 10px;
}

/* --- Acordeão: cada bloco puxa uma cor da campanha, como nos carrosséis --- */
.sanfona__item--verde  { --acento:var(--mata) }
.sanfona__item--azul   { --acento:var(--azulejo) }
.sanfona__item--amarelo{ --acento:var(--ouro) }
.sanfona__item{border-left:8px solid var(--acento,var(--azulejo))}
.sanfona__cab:hover{background:var(--acento,var(--ouro));color:var(--cal-pura)}
.sanfona__item--amarelo .sanfona__cab:hover{color:var(--tinta)}
.sanfona__sinal::before,.sanfona__sinal::after{background:var(--acento,var(--azulejo))}
.sanfona__cab:hover .sanfona__sinal::before,
.sanfona__cab:hover .sanfona__sinal::after{background:currentColor}
.sanfona__grade{display:grid;gap:20px;align-items:start}
.sanfona__foto{
  width:100%;height:auto;border:var(--borda);box-shadow:var(--lastro);
  aspect-ratio:4/3;object-fit:cover;
}
@media (min-width:760px){
  .sanfona__grade{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
}

/* --- ArnonZap: era um bloco verde chapado --- */
.zap{
  background:var(--mata);
  background-image:url("img/azulejo.png");
  background-size:150px;background-blend-mode:soft-light;
}
.zap__inner{position:relative}
.zap__foto img{filter:drop-shadow(12px 12px 0 rgba(0,0,60,.28))}
.zap__txt{
  background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro-alt);
  padding:clamp(22px,3.4vw,34px);
}
.zap__marca{color:var(--tinta)}
.zap__marca span{color:var(--tinta)}
.zap__marca .zapword{color:var(--mata)}
.zap__q{color:var(--mata)}
.zap__desc{color:#243154}
.zap__selo{
  display:inline-block;background:var(--ouro);color:var(--tinta);
  border:2px solid var(--tinta);padding:6px 12px;margin-bottom:14px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}

/* --- Textura nas seções claras, para nada ficar chapado --- */
.caminho,.ultimas,.numeros{position:relative;overflow:hidden}
.caminho::after,.ultimas::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("img/azulejo.png") repeat;background-size:170px;opacity:.05;
}
.caminho__in,.ultimas__in{position:relative;z-index:1}

/* --- Menu: alvo maior, estado de foco e ativo mais claros --- */
.barra__nav a{position:relative;border-color:transparent}
.barra__nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:3px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.barra__nav a:hover::after,.barra__nav a:focus-visible::after{transform:scaleX(1)}
.barra__nav a.is-atual{background:var(--azulejo);border-color:var(--ouro);color:var(--cal-pura)}
.barra__nav a.is-atual::after{transform:scaleX(1)}
.barra__marca img{transition:transform .2s ease}
.barra__marca:hover img{transform:translateY(-2px);opacity:1}

/* --- Nome, número e foto presentes em toda página (nav.js) ---------------
   É candidato: o número e o rosto precisam aparecer em qualquer página em
   que a pessoa caia, não só na home. */
.barra__marca{display:flex;align-items:center;gap:10px;line-height:0}
.barra__numero{
  font-family:var(--numero);font-weight:800;font-size:19px;line-height:1;
  color:var(--tinta);background:var(--ouro);padding:5px 9px 4px;
  border:2px solid var(--tinta);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.barra__marca:hover .barra__numero{background:var(--cal-pura)}

.rodape__cartao{display:flex;align-items:center;gap:16px}
.rodape__foto{
  width:76px;height:76px;flex:0 0 auto;object-fit:cover;
  border:2px solid var(--cal);box-shadow:5px 5px 0 var(--azulejo);
}
.rodape__numero{margin-top:6px}
.rodape__numero b{
  font-family:var(--numero);font-weight:800;font-size:34px;line-height:1;
  color:var(--ouro);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .barra__numero{font-size:16px;padding:4px 7px 3px}
  .rodape__cartao{justify-content:center;text-align:left}
  .rodape__foto{width:62px;height:62px}
}

/* --- Menu do celular: gaveta -------------------------------------------
   Cinco itens espremidos numa linha viravam texto de 10px, pequeno demais
   para acertar com o dedo. Abaixo de 720px vira botão + gaveta. */
.barra__botao{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;cursor:pointer;
  background:transparent;border:2px solid var(--ouro);
}
.barra__botao span{display:block;height:3px;background:var(--ouro);transition:transform .2s ease,opacity .2s ease}
.barra__botao[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.barra__botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.barra__botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:720px){
  .barra__botao{display:flex}
  .barra__in{flex-wrap:wrap}
  .barra__nav{
    display:none;order:3;flex-basis:100%;flex-direction:column;
    gap:0;padding-top:10px;
  }
  .barra__nav.is-aberto{display:flex}
  .barra__nav a{
    padding:15px 4px;font-size:14px;letter-spacing:.14em;
    border:0;border-bottom:2px solid rgba(127,182,255,.22);
  }
  .barra__nav a:last-child{border-bottom:0}
  .barra__nav a::after{display:none}
  .barra__nav a.is-atual{background:transparent;color:var(--ouro)}
}

/* =========================== PAINEL (admin.html) =========================
   Interno, mas no mesmo sistema visual do site: mesmos tokens, canto reto,
   borda dura e lastro sólido. Quem publica não deveria sentir que saiu do
   site do candidato.
   ========================================================================= */
.painel{background:var(--cal);color:var(--tinta);min-height:100dvh;display:flex;flex-direction:column}
.painel__topo{background:var(--tinta);border-bottom:var(--borda);position:sticky;top:0;z-index:20}
.painel__topo-in{
  max-width:1000px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.painel__marca{display:flex;align-items:center;gap:10px;line-height:0}
.painel__marca img{height:30px;width:auto}
.painel__eu{display:flex;align-items:center;gap:12px;color:var(--azul-claro);font-size:12px;font-weight:600}
.painel__sair{
  background:transparent;border:2px solid var(--azul-claro);color:var(--cal-pura);
  font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 12px;cursor:pointer;
}
.painel__sair:hover{background:var(--ouro);color:var(--tinta);border-color:var(--ouro)}

.painel__corpo{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:28px 16px 60px}
.painel__cabeca{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px;
}
.painel__cabeca h1{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,4vw,38px);line-height:1;
}
.painel__voltar{
  background:transparent;border:0;cursor:pointer;color:var(--azulejo);
  font-family:var(--ui);font-weight:700;font-size:13px;
}
.painel__voltar:hover{text-decoration:underline}

/* --- entrar --- */
.painel__entrar{display:flex;justify-content:center;padding-top:20px}
.painel__cartao{
  width:100%;max-width:440px;background:var(--cal-pura);
  border:var(--borda);box-shadow:var(--lastro-alt);padding:30px 26px;
}
.painel__cartao h1{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:26px;line-height:1;margin-bottom:12px;
}
.painel__ajuda{font-family:var(--corpo);color:var(--pedra);font-size:15.5px;line-height:1.6;margin-bottom:20px}
.painel__cartao label,.painel__campo label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:7px;
}
.painel__cartao input,.painel__campo input,.painel__campo textarea{
  width:100%;border:var(--borda);background:var(--cal-pura);color:var(--tinta);
  font-family:var(--ui);font-size:16px;padding:12px 14px;outline:none;
}
.painel__campo textarea{font-family:var(--corpo);line-height:1.6;resize:vertical}
.painel__cartao input:focus,.painel__campo input:focus,.painel__campo textarea:focus{
  box-shadow:4px 4px 0 var(--ouro);
}
.painel__cartao .botao{margin-top:16px;width:100%;text-align:center;cursor:pointer}

.painel__aviso{margin-top:14px;font-size:14px;line-height:1.5;font-weight:600;min-height:20px}
.painel__aviso--ok{color:var(--mata)}
.painel__aviso--erro{color:#B3123B}

/* --- lista --- */
.pn-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro);
  padding:16px 18px;margin-bottom:12px;border-left:8px solid var(--mata);
}
.pn-item--rascunho{border-left-color:var(--pedra);background:var(--cal)}
.pn-item__estado{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cal-pura);background:var(--mata);
  padding:3px 8px;margin-bottom:8px;
}
.pn-item--rascunho .pn-item__estado{background:var(--pedra)}
.pn-item h2{font-family:var(--display);font-weight:900;font-size:19px;line-height:1.15;text-transform:uppercase}
.pn-item__meta{font-size:12px;color:var(--pedra);margin-top:6px;font-variant-numeric:tabular-nums}
.pn-item__acoes{display:flex;align-items:center;gap:10px}
.pn-item__ver{font-size:12px;font-weight:700;color:var(--azulejo);text-decoration:underline}
.pn-item__editar{
  background:var(--ouro);border:var(--borda);cursor:pointer;
  font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 18px;box-shadow:3px 3px 0 var(--tinta);
}
.pn-item__editar:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--tinta)}
.painel__vazio{font-family:var(--corpo);color:var(--pedra);font-size:16px;padding:30px 0}

/* --- editor --- */
.painel__form{background:var(--cal-pura);border:var(--borda);box-shadow:var(--lastro-alt);padding:clamp(20px,3vw,32px)}
.painel__campo{margin-bottom:20px}
.painel__linha{display:grid;gap:18px;grid-template-columns:1fr}
.painel__dica{font-size:12.5px;color:var(--pedra);margin-top:7px;line-height:1.5}
.painel__dica code{background:var(--cal);border:1px solid #C9D3E6;padding:1px 5px;font-size:.92em}
.painel__check{display:flex;align-items:center;gap:10px;cursor:pointer}
.painel__check input{width:20px;height:20px;accent-color:var(--mata)}
.painel__check span{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none}
#pn-capa-previa img{margin-top:12px;max-width:280px;border:var(--borda)}
.painel__acoes{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.painel__acoes .botao{cursor:pointer}
.painel__apagar{
  background:transparent;border:2px solid #B3123B;color:#B3123B;cursor:pointer;
  font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:13px 18px;
}
.painel__apagar:hover{background:#B3123B;color:var(--cal-pura)}

@media (min-width:700px){
  .painel__linha{grid-template-columns:1fr 200px}
}

/* --- Linktree: a textura de azulejo que faltava ------------------------
   A página ficou com a trama diagonal genérica enquanto o resto do site
   ganhou o ladrilho. Agora usa o mesmo motivo das outras páginas. */
.bio{
  background:var(--tinta);
  background-image:url("img/azulejo.png");
  background-size:190px;
  position:relative;
}
.bio::before{                       /* véu: o ladrilho não pode competir */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,
    rgba(0,0,80,.62) 0%, rgba(0,0,80,.86) 55%, rgba(0,0,80,.94) 100%);
}
.bio__wrap,.bio .rodape{position:relative;z-index:1}

/* --- "Quem é" no computador -------------------------------------------
   No celular estava bom porque tudo empilha. No PC a coluna de texto
   atravessava a tela inteira: linha longa demais para ler, e o acordeão
   virava uma faixa larga e baixa. Passa a ter duas colunas, com a galeria
   ao lado do texto. */
@media (min-width:1000px){
  .quem__in{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,420px);
    grid-template-areas:
      "titulo  galeria"
      "resumo  galeria"
      "sanfona galeria";
    column-gap:48px;align-items:start;
  }
  .quem .secao__titulo{grid-area:titulo}
  .quem__resumo{grid-area:resumo;max-width:52ch}
  .quem .sanfona{grid-area:sanfona}
  .quem .galeria{
    grid-area:galeria;grid-template-columns:1fr 1fr;
    position:sticky;top:120px;margin:0;
  }
  /* dentro do acordeão a foto já aparece; em duas colunas ela apertava
     demais o texto, então some e sobra a galeria ao lado */
  .quem .sanfona__foto{display:none}
  .quem .sanfona__grade{grid-template-columns:1fr}
}