/* =============================================================================
   Junia Nunes 44777 — sistema visual
   =============================================================================
   Direção do designer da campanha, e o porquê de cada escolha:

   AZUL MÉDIO, NÃO MARINHO. Palavras dele: azul escuro passa "segurança como
   um banco", e banco traz resistência junto. As causas dela — mulheres,
   crianças, minorias — pedem um azul que soe acessível. Por isso o
   #2058A8 amostrado da arte, e não um navy.

   DEGRADÊ QUASE IMPERCEPTÍVEL. Claro para escuro dentro do MESMO azul. Não é
   para aparecer como degradê: é para dar textura à superfície.

   PESO, SEM TRAÇO FINO. A fonte da campanha é a Altone, que é paga (Alit
   Design) e não temos licença de webfont — servir o arquivo seria
   distribuí-la. A Montserrat é a substituta: geométrica como a Altone e com
   os pesos pesados que a identidade pede. Se a campanha licenciar a Altone,
   é trocar --fonte aqui.

   As cores vêm do config.js: o home.js injeta --azul, --amarelo etc. em
   :root, e os tokens abaixo consomem essas variáveis.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

/* `hidden` só traz display:none do navegador, e qualquer regra com display na
   mesma classe o derruba em silêncio. Quem escreve el.hidden = true espera
   que o elemento suma. */
[hidden]{display:none !important}

:root{
  /* reserva, iguais aos amostrados da arte; o config sobrescreve */
  --azul:#2058A8;
  --azul-claro:#2E6FD0;
  --azul-escuro:#103C84;
  --amarelo:#F8D000;
  --tinta:#0C1626;
  --cal:#F3F7FF;
  --branco:#fff;

  --fonte:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --max:1120px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:var(--fonte);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
.envolve{max-width:var(--max);margin:0 auto;padding:0 22px}

/* O degradê da identidade. Mesmo azul nas duas pontas — a diferença é de
   textura, não de cor. Se der para "ver" o degradê, ele está errado. */
.degrade{
  background:linear-gradient(168deg,var(--azul-claro) 0%,var(--azul) 55%,var(--azul-escuro) 100%);
}

/* ------------------------------------------------------------------ botão -- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;min-height:54px;
  font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;border-radius:10px;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.botao:hover{transform:translateY(-2px);filter:brightness(1.05)}
.botao:active{transform:translateY(0)}
.botao--amarelo{background:var(--amarelo);color:var(--tinta);box-shadow:0 6px 18px rgba(248,208,0,.28)}
.botao--branco{background:#fff;color:var(--azul-escuro)}
.botao--vazado{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.botao--vazado:hover{background:rgba(255,255,255,.12)}
.botao svg{width:20px;height:20px;flex:none}

/* ------------------------------------------------------------------- capa -- */
.capa{position:relative;color:var(--branco);overflow:hidden;padding:clamp(52px,8vw,96px) 0}
/* brilho suave, para a superfície não ficar chapada */
.capa::before{
  content:"";position:absolute;inset:-25% -10%;pointer-events:none;
  background:radial-gradient(46% 58% at 78% 22%,rgba(255,255,255,.16),transparent 62%);
}
.capa__in{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,54px);align-items:center}

.capa__selo{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);color:#fff;
  font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:100px;margin-bottom:20px;
}
.capa__titulo{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,5.6vw,64px);line-height:1;letter-spacing:-.02em;margin:0;
}
.capa__titulo em{font-style:normal;color:var(--amarelo)}
.capa__nome{font-weight:800;font-size:clamp(14px,1.7vw,18px);color:rgba(255,255,255,.95);margin:18px 0 0}
/* Opacidade 1, não .9. Com .9 o contraste caía para 4,28 sobre o azul da
   capa — abaixo dos 4,5 que o texto corrido precisa. Branco cheio dá 4,88.
   Diferença invisível no escritório, decisiva no celular sob sol. */
.capa__sub{font-size:clamp(15.5px,1.8vw,18px);margin:8px 0 28px;max-width:44ch}
.capa__acoes{display:flex;flex-wrap:wrap;gap:14px}
/* Era opacidade .72, que dava contraste 3,33 — reprovado com folga. Esta
   linha carrega a identificação legal da campanha e o contato: é justamente
   o texto que NÃO pode depender de boa vista. Agora 4,88. */
.capa__oficial{font-size:13.5px;margin:24px 0 0;max-width:46ch;line-height:1.5;color:rgba(255,255,255,.98)}
.capa__oficial a{color:var(--amarelo);text-decoration:none;white-space:nowrap}
.capa__oficial a:hover{text-decoration:underline}

/* O número é o ativo de campanha. Ele é a arte da primeira dobra. */
.capa__numero{display:flex;flex-direction:column;align-items:center;gap:16px}
.capa__avatar{
  width:clamp(110px,15vw,150px);aspect-ratio:1;border-radius:50%;
  border:5px solid var(--amarelo);object-fit:cover;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
/* O amarelo sobre o azul claro do topo do degradê dá 3,26 de contraste.
   Passa por ser texto grande (56px, peso 900 — o limite é 3,0), mas passa
   raspando, e este é o elemento que a campanha mais precisa que seja lido:
   é o número que a pessoa digita na urna, muitas vezes olhando a tela sob
   sol forte. A sombra escura por baixo é o que dá a margem. */
.capa__digitos{
  font-weight:900;font-size:clamp(56px,10vw,116px);line-height:.9;
  letter-spacing:-.03em;color:var(--amarelo);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 rgba(8,26,64,.4), 0 10px 30px rgba(8,26,64,.45);
}
.capa__partido{
  font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-align:center;
}

@media (max-width:820px){
  .capa__in{grid-template-columns:1fr;gap:34px}
  .capa__numero{order:-1}
  .capa__acoes .botao{width:100%}
}

/* ----------------------------------------------------------------- causas -- */
.causas{padding:clamp(44px,6vw,76px) 0;background:var(--cal)}
.causas__grade{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* Sem borda e sem sombra de cartão: com elas as bandeiras pareciam botões
   e ninguém clica duas vezes num elemento que não responde. Falsa
   affordance custa confiança, e confiança é o ativo da página. */
.causa{
  background:#fff;border-radius:12px;
  padding:14px 20px;font-weight:800;font-size:16px;color:var(--azul-escuro);
  border-left:5px solid var(--amarelo);
}

/* ---------------------------------------------------------------- títulos -- */
.olho{
  font-weight:800;color:var(--azul);text-transform:uppercase;
  letter-spacing:.14em;font-size:12.5px;margin:0 0 10px;
}
.titulo-secao{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4vw,44px);line-height:1.02;letter-spacing:-.02em;margin:0 0 8px;
}

/* ------------------------------------------------------------------ quem -- */
.quem{padding:clamp(44px,6vw,76px) 0}
.quem__linhas{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.quem__linhas li{
  position:relative;padding-left:22px;font-weight:700;font-size:17px;
}
.quem__linhas li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;
  border-radius:3px;background:var(--amarelo);
}

/* -------------------------------------------------------------- instagram -- */
.insta{position:relative;color:var(--branco);padding:clamp(46px,6vw,84px) 0;overflow:hidden}
.insta::before{
  content:"";position:absolute;inset:-25% -10%;pointer-events:none;
  background:radial-gradient(42% 55% at 14% 26%,rgba(255,255,255,.14),transparent 62%);
}
/* Convite em cima, publicações embaixo em LARGURA CHEIA. Antes a grade
   dividia a linha com o convite, e uma foto quadrada ao lado de um reel
   vertical ficava minúscula — foi o "estão bem pequenos". Em largura cheia
   cada peça cresce e a diferença de altura vira ritmo, não defeito. */
.insta__in{position:relative;display:block}
.insta__convite{margin:0 0 clamp(24px,3.5vw,40px);max-width:62ch}
.insta__arroba{font-weight:800;font-size:17px;color:rgba(255,255,255,.92);margin:12px 0 22px}

/* SEM CORTE. As capas vêm em três proporções diferentes: reel 9:16, foto
   quadrada e uma deitada 16:9. Forçar uma proporção só cortava metade das
   verticais — era o "zoom" que aparecia. Colunas de altura livre mostram
   cada imagem inteira, e a mistura de alturas vira ritmo em vez de defeito. */
.insta__grade{columns:3;column-gap:16px}
.insta__item{
  position:relative;display:block;width:100%;overflow:hidden;border-radius:14px;
  margin:0 0 16px;break-inside:avoid;-webkit-column-break-inside:avoid;
  background:rgba(255,255,255,.08);transition:transform .2s ease;
}
.insta__item img{width:100%;height:auto;display:block;transition:transform .35s ease}
.insta__item:hover{transform:translateY(-4px)}
.insta__item:hover img{transform:scale(1.04)}
.insta__brilho{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(12,22,38,0) 45%,rgba(12,22,38,.55));
  opacity:0;transition:opacity .2s ease;
}
.insta__brilho svg{width:28px;height:28px}
.insta__item:hover .insta__brilho,.insta__item:focus-visible .insta__brilho{opacity:1}

@media (max-width:860px){
  .insta__grade{columns:2}
  .insta__convite .botao{width:100%}
}
@media (max-width:560px){ .insta__grade{columns:2;column-gap:10px} .insta__item{margin-bottom:10px} }

/* ----------------------------------------------------------- compartilhar --
   Faixa clara entre o azul do Instagram e o escuro do rodapé: o corte de cor
   é o que faz a pessoa parar de rolar e reparar no pedido. */
.share{padding:clamp(44px,6vw,76px) 0;background:var(--cal);position:relative;overflow:hidden}
.share::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background:url("img/marca/estrelas.svg") no-repeat left -5% center/min(24%,220px) auto;
}
.share__in{position:relative;max-width:56ch}
.share__texto{font-size:16.5px;color:#2b3a4f;margin:6px 0 24px}
.share .botao{min-width:min(100%,300px)}

/* Botão que já cumpriu o pedido: verde discreto, sem virar festa. */
.botao.is-feito,.lk__item.is-feito{background:#0E8A4F;color:#fff}

/* -------------------------------------------------------------- rodapé -- */
.rodape{background:var(--tinta);color:rgba(255,255,255,.72);padding:34px 0 40px;font-size:13px}
.rodape strong{color:#fff;font-size:14px}
.rodape p{margin:0 0 4px}
.rodape a{color:rgba(255,255,255,.9)}
.rodape__num{color:var(--amarelo);font-weight:900}

/* ============================================================== /links ==== */
/* Página do "link na bio". Vive sozinha: sem barra, sem rodapé grande, tudo
   numa coluna que cabe no polegar. */
body.pagina-links{min-height:100vh}
.lk{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:44px 20px;color:#fff}
.lk__cartao{width:100%;max-width:440px;text-align:center}
.lk__avatar{
  width:112px;height:112px;border-radius:50%;object-fit:cover;
  border:5px solid var(--amarelo);box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.lk__nome{font-weight:900;font-size:27px;text-transform:uppercase;letter-spacing:-.01em;margin:16px 0 2px}
.lk__cargo{font-weight:700;font-size:15px;color:#fff;margin:0}
.lk__numero{
  display:inline-block;margin:14px 0 4px;background:var(--amarelo);color:var(--tinta);
  font-weight:900;font-size:26px;letter-spacing:.02em;padding:6px 16px;border-radius:10px;
  font-variant-numeric:tabular-nums;
}
.lk__lista{display:grid;gap:12px;margin:26px 0 0}
/* Branco sólido, não translúcido. O botão de vidro sobre o azul dava 3,93
   de contraste — reprovado, e visivelmente lavado num celular sob sol.
   Branco cheio com texto azul-escuro dá acima de 10. Esta página é o funil
   inteiro: se o botão não se lê, não existe. */
.lk__item{
  width:100%;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:var(--azul-escuro);text-decoration:none;
  border:0;border-radius:12px;
  padding:16px 18px;min-height:58px;font-weight:800;font-size:16px;
  box-shadow:0 4px 14px rgba(6,24,60,.18);
  transition:transform .16s ease,box-shadow .16s ease;
}
.lk__item:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(6,24,60,.26)}
/* O de compartilhar puxa o amarelo: é a ação que multiplica as outras. */
.lk__item[data-compartilhar]{background:var(--amarelo);color:var(--tinta)}
.lk__item svg{width:20px;height:20px;flex:none}
/* Era .66 de opacidade, contraste 3,05. É a identificação legal exigida em
   propaganda de campanha — texto que a lei manda mostrar não pode ser o mais
   difícil de ler da página. */
.lk__legal{margin:26px 0 0;font-size:12.5px;color:#fff;line-height:1.55}
.lk__legal a{color:#fff}

/* ============================================================== textura ====
   O designer pediu textura, e o site estava chapado: degradê liso e nada
   mais. Três camadas, todas de graça em peso porque são CSS ou um SVG de
   1 KB — nada de imagem de fundo pesando na primeira dobra.

   1. A pincelada do logotipo, em marca d'água. É elemento oficial da marca,
      extraído do próprio logo, não um enfeite genérico.
   2. Uma trama de pontos finíssima, que quebra a chapa do azul sem virar
      "textura de fundo de site".
   3. Um brilho radial que já existia, agora acompanhado. */
.capa::after,
.insta::after,
.lk::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("img/marca/traco.svg");
  background-repeat:no-repeat;
  background-position:right -6% bottom -18%;
  background-size:min(52%,560px) auto;
  opacity:.14;
}
.insta::after{background-position:left -10% top -14%;transform:scaleX(-1);opacity:.1}

/* As ESTRELAS. É o que define a estética dela: nas peças do perfil, todo post
   traz um estrelão azul de pontas finas e faíscas amarelas jogadas sobre a
   foto. Sem elas o site tinha a cor certa e a linguagem errada.

   Ficam discretas de propósito — no post são protagonistas sobre a foto;
   aqui são fundo atrás de texto, e texto sobre estrela cheia não se lê. */
.capa::before{
  background-image:
    url("img/marca/estrelas.svg"),
    radial-gradient(46% 58% at 78% 22%,rgba(255,255,255,.16),transparent 62%);
  background-repeat:no-repeat,no-repeat;
  background-position:left -5% top 6%,center;
  background-size:min(36%,320px) auto,auto;
}
.insta::before{
  background-image:
    url("img/marca/estrelas.svg"),
    radial-gradient(42% 55% at 14% 26%,rgba(255,255,255,.14),transparent 62%);
  background-repeat:no-repeat,no-repeat;
  background-position:right -3% bottom 4%,center;
  background-size:min(28%,260px) auto,auto;
}
/* A página de links recebe as MESMAS três camadas da home: a pincelada do
   logo, o estrelão e a trama de pontos. Ela é o destino do link na bio —
   para muita gente é a PRIMEIRA coisa que vê da campanha. Chegar num
   degradê liso depois de um Instagram cheio de estrela quebra a linha. */
.lk{position:relative;overflow:hidden}
.lk::after{background-position:right -14% bottom -8%;background-size:min(70%,420px) auto;opacity:.16}
.lk::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("img/marca/estrelas.svg") no-repeat left -14% top 4%/min(52%,300px) auto;
}
.lk__cartao{position:relative;z-index:1}

.causas{position:relative;overflow:hidden}
.causas::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;
  background:url("img/marca/estrelas.svg") no-repeat right -4% center/min(24%,220px) auto;
}

/* Trama de pontos. 22px é fino o bastante para ler como papel, não como
   bolinha. */
.capa,.insta,.lk{
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;
}
.capa.degrade,.insta.degrade,.lk.degrade{
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
    linear-gradient(168deg,var(--azul-claro) 0%,var(--azul) 55%,var(--azul-escuro) 100%);
  background-size:22px 22px,auto;
}

/* A faixa de causas ganha a mesma trama, em azul sobre o claro. */
.causas{
  background-image:radial-gradient(rgba(32,88,168,.1) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ============================================================ animação ====
   Só esconde se o JS estiver rodando (html.js): sem script, nada some.
   E quem pediu menos movimento não recebe movimento nenhum. */
.js [data-anima]{opacity:0;transform:translateY(14px)}
.js [data-anima].is-visivel{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 70ms);
}

/* O número é o ativo da campanha: entra com um empurrão a mais que o resto. */
.js .capa__numero[data-anima]{transform:translateY(18px) scale(.94)}
.js .capa__numero[data-anima].is-visivel{
  transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.4,.64,1);
}

@media (prefers-reduced-motion:reduce){
  .js [data-anima],
  .js .capa__numero[data-anima]{opacity:1;transform:none;transition:none}
  .insta__item:hover,.insta__item:hover img,.botao:hover{transform:none}
}