/* =========================================================
   HOMERO MARCHESE 3050 — Landing Page
   Identidade visual: Band Guidelines Homero Marchese (Maringá-PR)
   Tipografia: Bungo Bold (títulos) + Mona Sans (apoio) + Poppins (texto)
   ========================================================= */

@font-face {
  font-family: "Bungo";
  src: url("assets/fonts/BungoBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face { font-family: "Mona Sans"; src: url("assets/fonts/mona-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("assets/fonts/mona-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("assets/fonts/mona-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("assets/fonts/mona-sans-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Paleta oficial — Band Guidelines */
  --ambar:        #FDB102;  /* Âmbar Imperial    */
  --laranja:      #FF6500;  /* Laranja Progresso */
  --laranja-logo: #FF9100;  /* sombra do logotipo */
  --azul:         #2F20D5;  /* Azul Inovação     */
  --marinho:      #000056;  /* Azul República    */
  --marinho-logo: #0E0070;  /* azul do logotipo  */
  --breu:         #00002E;  /* fundo mais profundo */
  --menta:        #89EDAC;  /* Mint Green        */
  --preto:        #0F0F0F;  /* Preto Estratégico */

  --papel:      #F4F1EC;
  --papel-puro: #FFFFFF;

  --fonte-titulo: "Bungo", "Arial Narrow", Impact, sans-serif;
  --fonte-apoio:  "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  /* expo-out: arranca rápido e assenta devagar — é o que dá a sensação
     de fluido. A --mola perdeu o repique exagerado. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --mola: cubic-bezier(.33, 1.15, .55, 1);
  --suave: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marinho);
  color: var(--papel);
  font-family: var(--fonte-texto);
  font-size: clamp(1rem, .95rem + .3vw, 1.0625rem);
  line-height: 1.65;
  /* só no body: com overflow-x também no html, o body vira seu próprio
     container de rolagem e a página inteira para de rolar. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.filtros { position: absolute; width: 0; height: 0; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ambar); color: var(--marinho);
  padding: .75rem 1.25rem; font-family: var(--fonte-apoio); font-weight: 700;
}
.pular:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

.progresso { position: fixed; inset: 0 0 auto; height: 4px; z-index: 90; pointer-events: none; }
.progresso i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ambar), var(--laranja));
  transition: width .1s linear;
}

/* =========================================================
   TIPOGRAFIA
   Sombra dura deslocada — o mesmo efeito do logotipo oficial.
   ========================================================= */
.titulo {
  font-family: var(--fonte-titulo); font-weight: 700;
  line-height: .86; letter-spacing: -.005em;
  text-transform: uppercase; text-wrap: balance;
  color: var(--papel-puro);
}
.titulo em { font-style: normal; color: var(--ambar); text-shadow: .05em .045em 0 var(--laranja); }
.titulo--xl { font-size: clamp(2.7rem, 1.1rem + 6.2vw, 6.4rem); }
.titulo--lg { font-size: clamp(2.3rem, 1.1rem + 4.4vw, 4.8rem); }
.titulo--md { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }

.titulo--escuro { color: var(--marinho-logo); }
.titulo--escuro em { color: var(--laranja); text-shadow: .05em .045em 0 var(--marinho-logo); }

/* marcador "///" — vem do "Band Guidelines /// Tipografia" do manual */
.marcador {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fonte-apoio); font-weight: 700;
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: 1.3rem;
}
.marcador i { font-style: normal; letter-spacing: -.08em; color: var(--laranja); }
.marcador--escuro { color: var(--marinho-logo); }
.marcador--escuro i { color: var(--laranja); }

.titulo__apoio {
  margin-top: 1.4rem;
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ambar);
}

.rotulo {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: .78rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--marinho-logo); margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.rotulo::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: .3; }

/* etiqueta inclinada — do adesivo branco torto do manual */
.etiqueta {
  display: inline-flex; align-items: stretch;
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  background: var(--papel-puro); color: var(--marinho-logo);
  transform: rotate(-1.6deg);
  box-shadow: 5px 5px 0 rgba(0,0,0,.25);
  margin-bottom: 1.8rem;
}
.etiqueta span { padding: .5rem .85rem; }
.etiqueta b {
  display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-size: 1.3rem; letter-spacing: 0;
  background: var(--laranja); color: var(--papel-puro); padding: 0 .5rem;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fonte-apoio); font-weight: 800;
  text-transform: uppercase; letter-spacing: .045em;
  padding: 1rem 1.6rem;
  border: 2px solid var(--marinho-logo);
  box-shadow: 6px 6px 0 var(--marinho-logo);
  transition: transform .18s var(--mola), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--marinho-logo); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--marinho-logo); }
.btn--sm { padding: .6rem 1rem; font-size: .8rem; box-shadow: 4px 4px 0 var(--marinho-logo); }
.btn--lg { font-size: clamp(.9rem, .8rem + .35vw, 1.05rem); padding: 1.15rem 2rem; }

.btn--laranja { background: var(--laranja); color: var(--papel-puro); }
.btn--ambar   { background: var(--ambar);   color: var(--marinho); }
.btn--verde   { background: var(--menta);   color: var(--marinho); }
.btn { white-space: nowrap; }

.seta { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   PADRÃO DIAGONAL — o step-and-repeat do backdrop da campanha
   ========================================================= */
.padrao {
  position: absolute; inset: -30% -20%;
  pointer-events: none; opacity: .16;
  background-image: repeating-linear-gradient(
    -32deg,
    transparent 0 4px,
    rgba(253,177,2,.75) 4px 6px,
    transparent 6px 74px
  );
  mask-image: linear-gradient(115deg, #000 5%, transparent 62%);
  -webkit-mask-image: linear-gradient(115deg, #000 5%, transparent 62%);
}
.padrao--laranja {
  opacity: .3;
  background-image: repeating-linear-gradient(-32deg, transparent 0 4px, rgba(255,255,255,.8) 4px 6px, transparent 6px 64px);
}

/* =========================================================
   FITA INCLINADA
   ========================================================= */
.fita-caixa {
  position: relative; z-index: 3; overflow: hidden;
  margin-block: clamp(-2.4rem, -3vw, -1.6rem);
}
.fita {
  position: relative;
  overflow: hidden;
  background: var(--ambar); color: var(--marinho-logo);
  border-block: 3px solid var(--marinho-logo);
  transform: rotate(-1.4deg);
  width: 116%; margin-inline: -8%;
  margin-block: 1.4rem;
  padding-block: .1rem;
}
.fita__trilho { display: flex; width: max-content; animation: correr 40s linear infinite; }
.fita span {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.9rem);
  letter-spacing: .03em; padding: .45rem 0; white-space: nowrap;
}
.fita i { font-style: normal; color: var(--laranja); letter-spacing: -.06em; }
/* a do rodapé é reta e encosta na base — sem rotação nem largura extra */
.fita--rodape {
  background: var(--laranja); color: var(--marinho-logo);
  margin: 0; width: 100%;
  transform: none; border-bottom: 0;
}
.fita--rodape i { color: var(--ambar); }
@keyframes correr { to { transform: translateX(-50%); } }

/* =========================================================
   TOPO
   ========================================================= */
.legal-topo {
  background: var(--preto); color: rgba(255,255,255,.6);
  font-family: var(--fonte-apoio); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-align: center; padding: .45rem 1rem;
}
.topo {
  position: sticky; top: 0; z-index: 80;
  background: #000048;
  border-bottom: 2px solid rgba(253,177,2,.28);
}
.topo__inner {
  width: min(100% - 2rem, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem; padding: .7rem 0;
}
.topo__logo img { width: clamp(140px, 18vw, 205px); height: auto; }
.topo__nav { display: flex; gap: 1.7rem; margin-left: auto; }
.topo__nav a {
  font-family: var(--fonte-apoio); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244,241,236,.78);
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.topo__nav a:hover { color: var(--ambar); border-color: var(--ambar); }
.topo__cta { margin-left: auto; }
.topo__nav + .topo__cta { margin-left: 0; }

/* =========================================================
   SEÇÃO 01 — HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 78% 30%, #12126E 0%, var(--marinho) 45%, var(--breu) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: end; gap: 1rem;
  padding-top: clamp(2rem, 4vw, 3.4rem);
}
.hero__texto { padding-bottom: clamp(1rem, 3vw, 2.5rem); }

.hero__h1 {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(3.4rem, 1rem + 9.4vw, 8.4rem);
  line-height: .82; letter-spacing: -.012em;
  text-transform: uppercase; color: var(--papel-puro);
}
.hero__h1 .linha { display: block; }
.hero__h1 .destaque { color: var(--ambar); text-shadow: .05em .045em 0 var(--laranja); }

.hero__base {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; gap: 1.6rem; justify-items: start;
  max-width: 34rem;
}
.hero__sub {
  position: relative; padding-left: 1.3rem;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem);
  color: rgba(244,241,236,.86);
}
.hero__sub::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em;
  width: 4px; background: var(--ambar);
}

.hero__figura { position: relative; display: grid; place-items: end center; }
.hero__figura > * { position: relative; }
/* Três camadas: placa âmbar (o chão claro que faz o terno escuro
   aparecer), o 3050 em escala por cima dela, e o retrato na frente.
   Retangular de propósito — o arco amaciava demais a mensagem. */
.hero__placa {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  transform: translateX(-50%);
  width: min(100%, 440px); height: 90%;
  background: linear-gradient(168deg, var(--ambar) 0%, #F59B00 100%);
  box-shadow: 16px 0 0 var(--laranja);
}
/* O 3050 é o ativo de conversão da campanha: é o que a pessoa precisa
   lembrar na urna. Aqui ele vira escala, não legenda. */
.hero__numero {
  position: absolute; left: 50%; top: 17%; z-index: 2;
  transform: translateX(-50%);
  font-family: var(--fonte-titulo); font-weight: 700;
  /* a Bungo é muito condensada: "3050" sai com só ~1,1x a altura da
     fonte. Para o número passar das bordas do retrato o corpo precisa
     ser quase tão grande quanto a largura desejada. */
  font-size: clamp(14rem, 36vw, 28rem);
  line-height: .78; letter-spacing: -.035em;
  color: var(--laranja);
  white-space: nowrap; pointer-events: none;
}
.hero__foto {
  position: relative; z-index: 3;
  width: min(100%, 400px); height: auto;
  filter: drop-shadow(-14px 22px 44px rgba(0,0,0,.5));
}

/* =========================================================
   SEÇÃO 02 — A BATALHA
   ========================================================= */
.batalha {
  position: relative;
  overflow-x: clip;      /* entradas direcionais deslocam para fora antes de revelar */
  background: var(--breu);
  padding: clamp(4rem, 8vw, 7rem) 0 0;
}
/* as entradas direcionais deslocam o elemento para fora antes de revelar;
   sem o clip aqui isso vira rolagem horizontal na página inteira */
.batalha__cabeca {
  overflow-x: clip;
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.batalha__figura { position: relative; display: grid; justify-items: center; }
.batalha__moldura {
  position: relative;
  width: min(100%, 330px); aspect-ratio: 33 / 44;
  background: linear-gradient(168deg, var(--laranja) 0%, #FB8A00 55%, var(--ambar) 100%);
  box-shadow: 14px 14px 0 rgba(253,177,2,.22);
  overflow: hidden;
}
/* encaixa pela altura: o retrato inteiro cabe na moldura, sem cortar a cabeça */
.batalha__moldura img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 96%; width: auto; max-width: none;
}

.remate {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: clamp(1rem, .9rem + .6vw, 1.4rem);
  line-height: 1.35; letter-spacing: .02em; text-transform: uppercase;
  text-wrap: balance;
}
/* sem o manifesto acima, o remate não precisa do respiro que
   separava os dois blocos */
.remate--solto { margin-top: clamp(1.2rem, 2.5vw, 2rem); padding-top: 0; }
.remate--solto b { margin-top: 0; }
.remate span { display: block; color: rgba(244,241,236,.9); }
.remate b {
  display: inline-block; margin-top: 1rem;
  background: var(--ambar); color: var(--marinho-logo);
  padding: .5em .85em; box-shadow: 6px 6px 0 var(--laranja);
  transform: rotate(-1deg);
}

/* =========================================================
   QUEM SOU
   ========================================================= */
.quemsou {
  /* sem overflow:hidden aqui: um ancestral com overflow (mesmo sem
     rolagem própria) vira o "scrollport" do position:sticky do retrato
     logo abaixo, e ele passa a rolar junto com a página em vez de
     fixar. O clipe do monograma H mora só em .quemsou__fundo. */
  position: relative;
  background: var(--marinho-logo); color: var(--papel);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
/* envelope do monograma — irmão de .quemsou__inner, nunca ancestral
   do retrato sticky, então pode clipar sem quebrar nada */
.quemsou__fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.quemsou__h {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(38vw, 460px); height: auto; opacity: .07;
}
.quemsou__inner {
  position: relative;
  display: grid; grid-template-columns: .68fr 1.32fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
/* a bio ficou longa (14 parágrafos): o retrato acompanha a leitura
   em vez de encolher lá no topo de uma coluna gigante */
.quemsou__figura { position: sticky; top: 6rem; align-self: start; }
/* mesma linguagem do hero e da seção 02: a moldura recorta a foto */
.quemsou__moldura {
  position: relative;
  width: min(100%, 380px); aspect-ratio: 19 / 25;
  margin-inline: auto;
  background: linear-gradient(168deg, var(--ambar) 0%, #F5A100 60%, var(--laranja) 100%);
  box-shadow: 16px 16px 0 rgba(255, 101, 0, .3);
  overflow: hidden;
}
.quemsou__moldura::before {
  content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: repeating-linear-gradient(-32deg, transparent 0 4px, rgba(14,0,112,.6) 4px 6px, transparent 6px 60px);
}
.quemsou__moldura img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 99%; width: auto; max-width: none;
}
.quemsou__cartao {
  position: absolute; left: -1rem; bottom: 1.6rem; z-index: 2;
  background: var(--ambar); color: var(--marinho-logo);
  padding: .85rem 1.15rem; box-shadow: 6px 6px 0 var(--laranja);
  transform: rotate(-2deg);
}
.quemsou__cartao strong {
  display: block;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); line-height: 1;
  text-transform: uppercase;
}
.quemsou__cartao em {
  display: block; margin-top: .15rem;
  font-family: var(--fonte-apoio); font-style: italic; font-weight: 700;
  font-size: .82rem; letter-spacing: .04em;
}

.quemsou__texto { display: grid; gap: 1.15rem; max-width: 66ch; justify-items: start; }
.quemsou__texto p { font-size: clamp(1rem, .95rem + .3vw, 1.1rem); color: rgba(244,241,236,.82); }

/* botão que abre o restante da biografia */
.quemsou__mais { cursor: pointer; }
.quemsou__mais .seta {
  stroke-width: 2.6;
  transition: transform .35s var(--ease);
}
.quemsou__mais[aria-expanded="true"] .seta { transform: rotate(180deg); }

.quemsou__completa { display: grid; gap: 1.15rem; }
.quemsou__completa[hidden] { display: none; }

/* Resumo em destaque e citação de fecho dividem o mesmo tratamento:
   Bungo grande, marcador "///" e as palavras acendendo na rolagem.
   A especificidade extra no resumo é para vencer `.quemsou__texto p`
   sem precisar de !important. */
.citacao,
.quemsou__texto .quemsou__resumo {
  margin-top: .8rem;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  line-height: 1; letter-spacing: -.005em; text-transform: uppercase;
  color: var(--papel-puro); text-wrap: balance;
}
.citacao::before,
.quemsou__resumo::before {
  content: "///"; display: block; margin-bottom: .5rem;
  font-family: var(--fonte-apoio); font-size: 1.1rem;
  letter-spacing: -.06em; color: var(--ambar);
}
.quemsou__texto .quemsou__resumo { margin-top: 0; }

/* =========================================================
   SEÇÃO 04 — BANDEIRAS (grade editorial)
   ========================================================= */
.bandeiras {
  background: var(--ambar); color: var(--marinho-logo);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.bandeiras__cabeca { max-width: 940px; }
.bandeiras .titulo--escuro em { color: var(--papel-puro); text-shadow: .05em .045em 0 var(--marinho-logo); }

.grade {
  margin-top: 1.8rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--marinho-logo);
  border-left: 3px solid var(--marinho-logo);
}
.verba {
  position: relative; overflow: hidden;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.1rem, 2vw, 1.5rem);
  border-right: 3px solid var(--marinho-logo);
  border-bottom: 3px solid var(--marinho-logo);
  transition: background-color .3s var(--ease);
}
.verba > * { position: relative; }
.verba span {
  display: block; margin-bottom: .8rem;
  font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: 1;
  color: var(--laranja);
  transition: color .3s var(--ease);
}
.verba h3 {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: .98; text-transform: uppercase; margin-bottom: .6rem;
  transition: color .3s var(--ease);
}
.verba p { font-size: .92rem; line-height: 1.5; color: rgba(14,0,112,.78); transition: color .3s var(--ease); }
@media (hover: hover) {
  .verba:hover { background: var(--marinho-logo); }
  .verba:hover h3 { color: var(--ambar); }
  .verba:hover span { color: var(--ambar); }
  .verba:hover p { color: rgba(244,241,236,.85); }
}

/* =========================================================
   BLOCO DE VOTO — o lockup cheio da p6 do manual
   ========================================================= */
.voto {
  position: relative; overflow: hidden;
  background: var(--laranja); color: var(--papel-puro);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-block: 3px solid var(--marinho-logo);
}
.voto__inner { position: relative; z-index: 2; text-align: center; }
.voto__texto {
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: clamp(1rem, .9rem + .6vw, 1.45rem);
  line-height: 1.35; letter-spacing: .02em; text-transform: uppercase;
  text-wrap: balance;
}
.voto__texto span { display: block; }
.voto__grito {
  margin-top: clamp(1rem, 2.5vw, 1.8rem);
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(3.6rem, 1rem + 11vw, 10rem);
  line-height: .82; letter-spacing: -.015em;
  color: var(--papel-puro);
  text-shadow: .035em .03em 0 var(--marinho-logo);
}

/* =========================================================
   GRUPO DE WHATSAPP
   ========================================================= */
.grupo { background: var(--marinho); padding: clamp(4rem, 8vw, 6.5rem) 0; }
.grupo__inner { display: grid; grid-template-columns: 1.32fr .68fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }

.grupo__cartao {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--laranja), #C94800);
  border: 3px solid var(--marinho-logo);
  box-shadow: 12px 12px 0 var(--marinho-logo);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(11rem, 32%, 19rem);
  align-items: stretch;
  min-height: 27rem;
}
.grupo__corpo { padding: clamp(1.8rem, 3.4vw, 2.6rem); }
.grupo__cartao .marcador { color: rgba(255,255,255,.85); }
.grupo__cartao .marcador i { color: var(--ambar); }
.grupo__cartao .titulo { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.5rem); }
.grupo__cartao .titulo em { color: var(--ambar); text-shadow: .05em .045em 0 var(--marinho-logo); }
.grupo__texto { margin: 1.2rem 0 1.8rem; max-width: 32ch; font-size: 1.02rem; color: rgba(255,255,255,.92); }
.grupo__texto b { font-weight: 700; color: var(--papel-puro); }
/* painel de foto: recorta o recorte, então o corte reto da imagem
   coincide com a base do cartão e some. Ele encosta na borda direita. */
/* o cartão já tem overflow:hidden e o painel encosta na base dele,
   então o corte reto da foto some ali. Aqui o overflow fica visível
   de propósito: a mão com o celular atravessa a borda do painel. */
.grupo__midia {
  position: relative;
  background: linear-gradient(200deg, #FF7A1F, #D45100);
  border-left: 3px solid rgba(14, 0, 112, .22);
}
.grupo__midia::before {
  content: ""; position: absolute; inset: 0; opacity: .3;
  background-image: repeating-linear-gradient(-32deg, transparent 0 4px, rgba(255,255,255,.7) 4px 6px, transparent 6px 58px);
}
.grupo__foto {
  position: absolute; right: -8%; bottom: 0;
  height: 100%; width: auto; max-width: none;
  pointer-events: none;
}

.vantagens { overflow-x: clip; display: grid; gap: 0; border-top: 2px solid rgba(137,237,172,.28); }
.vantagem {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  padding: 1.3rem .4rem;
  border-bottom: 2px solid rgba(137,237,172,.28);
  transition: background-color .35s var(--ease);
}
/* barra que cresce na lateral — só transform, sem refluxo de texto */
.vantagem::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--menta);
  transform: scaleY(0); transform-origin: center;
  transition: transform .38s var(--ease);
}
.vantagem > * { transition: transform .38s var(--ease); }
.vantagem span {
  font-family: var(--fonte-titulo); font-size: 2rem; line-height: 1; color: var(--menta);
  transition: transform .38s var(--ease), color .38s var(--ease);
}
.vantagem p { font-size: .97rem; line-height: 1.5; color: rgba(244,241,236,.85); }
@media (hover: hover) {
  .vantagem:hover { background: rgba(137,237,172,.07); }
  .vantagem:hover::before { transform: scaleY(1); }
  .vantagem:hover > * { transform: translateX(.75rem); }
}

/* =========================================================
   SEÇÃO 05 — DOAÇÃO + REDES
   ========================================================= */
.redes { background: var(--breu); color: var(--papel); padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.redes__marcador { justify-content: center; }
.redes__titulo { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* cartão de perfil — os dados são os do print de perfil que veio na copy */
.ig {
  width: min(100%, 760px); margin-inline: auto;
  background: var(--marinho);
  border: 3px solid var(--ambar);
  box-shadow: 14px 14px 0 var(--laranja);
}
.ig__topo {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ig__avatar {
  position: relative; display: block;
  width: clamp(84px, 13vw, 122px); aspect-ratio: 1;
  border-radius: 50%; padding: 4px; flex: none;
  background: conic-gradient(from 200deg, var(--ambar), var(--laranja), var(--ambar));
  transition: transform .3s var(--mola);
}
.ig__avatar:hover { transform: scale(1.05) rotate(-2deg); }
.ig__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--marinho); }

.ig__user {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
}
.ig__verif { width: 1em; height: 1em; flex: none; fill: #3897F0; }
.ig__tique { fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ig__nome { font-size: .95rem; color: rgba(244,241,236,.72); margin-top: .1rem; }

.ig__numeros {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.2rem);
  margin: 1rem 0 1.1rem;
  padding: .85rem 0;
  border-block: 2px solid rgba(253,177,2,.24);
}
.ig__numeros li { display: flex; flex-direction: column; line-height: 1.15; }
.ig__numeros b {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
  color: var(--ambar); font-variant-numeric: tabular-nums;
}
.ig__numeros span {
  font-family: var(--fonte-apoio); font-weight: 500;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,241,236,.6);
}

.ig__bio { display: grid; gap: .15rem; font-size: .93rem; color: rgba(244,241,236,.85); }
.ig__categoria { color: rgba(244,241,236,.55); font-size: .86rem; margin-bottom: .3rem; }

.ig__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.ig__btn {
  flex: 1 1 auto; text-align: center;
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: .85rem; letter-spacing: .03em;
  padding: .7rem 1.2rem;
  background: rgba(255,255,255,.09); color: var(--papel);
  border: 2px solid rgba(253,177,2,.3);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--mola);
}
.ig__btn:hover { background: rgba(255,255,255,.15); border-color: var(--ambar); transform: translateY(-2px); }
.ig__btn--forte { background: var(--ambar); color: var(--marinho); border-color: var(--ambar); }
.ig__btn--forte:hover { background: var(--ambar-claro, #FFC63F); }

.ig__ver {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.1rem 1.2rem;
  background: var(--laranja); color: var(--papel-puro);
  border-top: 3px solid var(--ambar);
  font-family: var(--fonte-apoio); font-weight: 800;
  font-size: .95rem; letter-spacing: .02em;
  transition: background-color .25s var(--ease), color .25s var(--ease), gap .25s var(--ease);
}
.ig__ver:hover { background: var(--ambar); color: var(--marinho-logo); gap: 1rem; }
.ig__ver > svg:first-child { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.9; }
.ig__ver .cheio { fill: currentColor; stroke: none; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { background: var(--marinho); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.rodape__inner { display: grid; justify-items: center; gap: 1.2rem; padding-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.rodape__logo { width: min(100%, 320px); height: auto; }
.rodape__legal {
  font-family: var(--fonte-apoio); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,236,.48);
}

.flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 85;
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  background: var(--menta); color: var(--marinho);
  border: 2px solid var(--marinho-logo); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--marinho-logo);
  opacity: 0; transform: translateY(20px) scale(.85); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--mola);
}
.flutuante svg { width: 55%; height: 55%; fill: currentColor; }
.flutuante.visivel { opacity: 1; transform: none; pointer-events: auto; }
.flutuante:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--marinho-logo); }

/* =========================================================
   ANIMAÇÕES
   Tudo entra por opacidade + deslocamento curto. Nada de bounce:
   a campanha pede firmeza, não brincadeira.
   ========================================================= */

/* --- títulos: cada linha sobe de dentro de uma máscara ---
   O respiro em cima e embaixo é obrigatório: com line-height .86 a
   caixa fica mais baixa que os glifos e o overflow come os acentos
   (É, Á, Ã). A margem negativa devolve o espaço no layout. */
.js .titulo-mask {
  display: block; overflow: hidden;
  padding-top: .24em;    margin-top: -.24em;
  padding-bottom: .24em; margin-bottom: -.24em;
}
.js .titulo-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease) var(--atraso, 0s);
}
.js .dentro .titulo-mask > span,
.js .titulo-mask.dentro > span { transform: none; }

/* --- palavras que acendem conforme a página rola ---
   Cada palavra tem seu próprio --p (0 a 1) escrito pelo script. --- */
.js .palavra {
  display: inline-block;
  opacity: calc(.16 + .84 * var(--p, 1));
  transform: translateY(calc((1 - var(--p, 1)) * .16em));
  transition: opacity .12s linear, transform .12s linear;
}

/* --- cartões que sobem amarrados ao scroll --- */
.js .sobe {
  opacity: var(--p, 1);
  transform: translateY(calc((1 - var(--p, 1)) * 46px));
}

/* --- números que contam --- */
.js .contando { font-variant-numeric: tabular-nums; }

/* --- paralaxe leve: o elemento sobe um pouco mais devagar que a página --- */
.js .flutua { transform: translate3d(0, var(--desvio, 0), 0); will-change: transform; }

.js .revela { opacity: 0; transform: translateY(28px); }
.js .revela--esq { transform: translateX(-34px); }
.js .revela--dir { transform: translateX(34px); }
.js .revela--zoom { transform: scale(.94); }
.js .revela.dentro {
  opacity: 1; transform: none;
  transition: opacity 1.05s var(--ease) var(--atraso, 0s), transform 1.05s var(--ease) var(--atraso, 0s);
}

/* moldura de foto: a imagem revela por dentro, com leve zoom-out */
.js .batalha__moldura img,
.js .quemsou__moldura img,
.js .grupo__midia img { transition: transform 1.2s var(--ease); }
.js .revela .batalha__moldura img,
.js .revela .quemsou__moldura img { transform: translateX(-50%) scale(1.1); }
.js .revela.dentro .batalha__moldura img,
.js .revela.dentro .quemsou__moldura img { transform: translateX(-50%) scale(1); }

/* varredura de luz que passa uma vez sobre a moldura ao entrar */
.batalha__moldura::after,
.quemsou__moldura::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.js .dentro .batalha__moldura::after,
.js .dentro .quemsou__moldura::after { animation: brilhar 1.5s var(--ease) .45s 1 both; }
@keyframes brilhar { to { transform: translateX(130%); } }

.js .hero__h1 .linha, .js .hero__base, .js .etiqueta { opacity: 0; transform: translateY(26px); }
.js.pronto .hero__h1 .linha,
.js.pronto .hero__base,
.js.pronto .etiqueta {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js.pronto .etiqueta { transform: rotate(-1.6deg); transition-delay: .05s; }
.js.pronto .hero__h1 .linha:nth-child(1) { transition-delay: .14s; }
.js.pronto .hero__h1 .linha:nth-child(2) { transition-delay: .22s; }
.js.pronto .hero__h1 .linha:nth-child(3) { transition-delay: .30s; }
.js.pronto .hero__h1 .linha:nth-child(4) { transition-delay: .38s; }
.js.pronto .hero__base { transition-delay: .52s; }

/* O conjunto arco + sombra + foto entra junto, como uma peça só.
   Nada de clip-path: a forma do arco vem do border-radius, e o inset
   revelava um retângulo no meio do caminho. */
.js .hero__figura { opacity: 0; transform: translateY(22px); }
.js.pronto .hero__figura {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
}

/* dentro da moldura, a foto assenta de um zoom leve — devagar,
   é o que dá o ar de acabamento sem chamar atenção para si */
.js .hero__foto { transform: translateY(3%) scale(1.04); transform-origin: 50% 100%; }
.js.pronto .hero__foto {
  transform: none;
  transition: transform 1.6s var(--ease) .15s;
}
.js .hero__numero { opacity: 0; transform: translateX(-50%) translateY(18px); }
.js.pronto .hero__numero {
  opacity: 1; transform: translateX(-50%);
  transition: opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1080px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .topo__nav { display: none; }
  .bandeiras__cabeca { max-width: none; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__texto { padding-bottom: 0; }
  /* No empilhado a figura vira uma FAIXA de sangria total. Um bloco
     com folga nas laterais fica boiando no meio da tela e o hero se
     parte em duas peças sem relação. */
  .hero__figura {
    margin-top: 1.8rem;
    /* o .hero__inner é `min(100% - 2.5rem, ...)`, então a folga lateral
       é sempre 1.25rem no empilhado — sangrar por aqui é exato, e não
       fica sujeito à diferença entre 100vw e a largura útil */
    width: auto; margin-inline: -1.25rem;
    height: clamp(24rem, 56vw, 30rem);
    overflow: hidden;
  }
  .hero__placa {
    width: 100%; height: 100%;
    left: 0; transform: none; box-shadow: none;
  }
  /* o número encosta no topo da faixa: a metade de cima dos dígitos
     aparece inteira acima da cabeça, em vez de ficar coberta pelo
     corpo e virar textura */
  .hero__numero { font-size: 62vw; top: -6%; }
  /* absoluto e ancorado embaixo: `height: 100%` em item de grid não
     resolve contra a faixa e a imagem estoura */
  /* centraliza por margin, não por transform: as regras de animação
     sobrescrevem `transform` e a foto perderia a centralização */
  .hero__foto {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin-inline: auto;
    height: 100%; width: auto; max-width: none;
  }

  /* no empilhado o título lidera; a foto vem depois e menor —
     uma foto de tela inteira antes da manchete empurra a mensagem
     para fora da primeira dobra da seção */
  .batalha__cabeca { grid-template-columns: 1fr; }
  .batalha__figura { display: grid; justify-items: center; margin-top: 1.8rem; }
  .batalha__moldura { width: min(68%, 260px); }

  .quemsou__inner { grid-template-columns: 1fr; }
  /* a figura encolhe até a moldura, então o cartão de nome se ancora
     na quina dela e não no meio do peito */
  /* relative (não static) porque o cartão de nome é absoluto e usa esta
     figura como referência. O `top` do sticky precisa ser zerado: em
     relative ele desloca de verdade e joga a figura por cima do texto. */
  .quemsou__figura {
    position: relative; top: auto;
    width: min(76%, 320px); margin-inline: auto;
  }
  .quemsou__moldura { width: 100%; }
  .quemsou__cartao { left: -.6rem; bottom: .9rem; padding: .55rem .8rem; }

  .grupo__inner { grid-template-columns: 1fr; }
  .grupo__cartao { grid-template-columns: 1fr; min-height: 0; }
  .grupo__midia {
    aspect-ratio: 4 / 3; border-left: 0;
    border-top: 3px solid rgba(14, 0, 112, .22);
  }
  .grupo__foto { right: auto; left: 50%; transform: translateX(-50%); height: 104%; }

}

/* =========================================================
   AJUSTE FINO DE MOBILE
   No celular a escala de desktop fica pesada: 8 bandeiras empilhadas
   em corpo cheio davam 12,5 telas de rolagem. Aqui o conteúdo fica
   compacto sem perder a cara da marca.
   ========================================================= */
@media (max-width: 620px) {
  /* hero: a foto precisa aparecer antes da dobra */
  .etiqueta { font-size: .68rem; letter-spacing: .14em; margin-bottom: 1.1rem; }
  .etiqueta b { font-size: 1.05rem; }
  .hero__inner { padding-top: 1.4rem; }
  .hero__sub { font-size: 1rem; padding-left: 1rem; }
  .hero__base { margin-top: 1.3rem; gap: 1.15rem; }
  .hero__figura { margin-top: 1.4rem; height: clamp(21rem, 74vw, 26rem); }
  .hero__numero { font-size: 92vw; top: -7%; }

  /* respiro das seções */
  .batalha  { padding-top: 3rem; }
  .quemsou  { padding-block: 2.75rem; }
  .bandeiras{ padding-block: 3rem; }
  .voto     { padding-block: 2.75rem; }
  .grupo    { padding-block: 3rem; }
  .redes    { padding-block: 3rem; }

  /* títulos um degrau abaixo — a Bungo é condensada, aguenta */
  .titulo--xl { font-size: clamp(2.15rem, 1rem + 5.4vw, 2.7rem); }
  .titulo--lg { font-size: clamp(1.95rem, 1rem + 4.4vw, 2.4rem); }
  .titulo--md { font-size: clamp(1.75rem, 1rem + 3.6vw, 2.2rem); }
  .hero__h1   { font-size: clamp(2.7rem, 1rem + 8.6vw, 3.6rem); }
  .citacao,
  .quemsou__texto .quemsou__resumo { font-size: clamp(1.3rem, 1rem + 2.4vw, 1.8rem); }
  .marcador   { margin-bottom: .9rem; font-size: .72rem; }

  /* bandeiras: número na mesma linha do título, texto menor */
  .grade { margin-top: 1.2rem; }
  .verba { padding: 1.05rem 1.1rem; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; }
  .verba span { grid-row: 1; margin-bottom: 0; font-size: 1.15rem; align-self: baseline; }
  .verba h3 { grid-row: 1; margin-bottom: 0; font-size: 1.08rem; align-self: baseline; }
  .verba p { grid-column: 2; margin-top: .45rem; font-size: .88rem; line-height: 1.45; }


  /* perfil: avatar ao lado do nome, como no app */
  /* avatar + nome numa linha; números, bio e botões usam a largura toda.
     `display: contents` promove os filhos de .ig__id a itens da grade. */
  .ig__topo {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem; row-gap: .15rem; padding: 1.2rem;
    text-align: left; justify-items: stretch; align-items: center;
  }
  .ig__id { display: contents; }
  .ig__avatar { width: 74px; grid-row: 1 / span 2; align-self: center; }
  .ig__user { grid-column: 2; justify-content: flex-start; align-self: end; }
  .ig__nome { grid-column: 2; align-self: start; }
  .ig__numeros { grid-column: 1 / -1; justify-content: space-between; gap: .8rem; margin: .9rem 0 .8rem; padding: .75rem 0; }
  .ig__bio { grid-column: 1 / -1; justify-items: start; font-size: .88rem; }
  .ig__acoes { grid-column: 1 / -1; margin-top: 1.1rem; }

  .quemsou__cartao strong { font-size: 1.02rem; }
  .quemsou__cartao em { font-size: .7rem; }
  .quemsou__texto { gap: .9rem; }
  .quemsou__texto p { font-size: .95rem; line-height: 1.6; }

  .vantagem { padding-block: 1.05rem; }
  .vantagem p { font-size: .92rem; }
  .grupo__texto { margin: .9rem 0 1.4rem; font-size: .96rem; }

  .grade { grid-template-columns: 1fr; }
  .ig__acoes { width: 100%; }
  .topo__inner { gap: .8rem; }
  .topo__cta { padding: .5rem .7rem; font-size: .7rem; }
  .fita { transform: rotate(-2.4deg); width: 128%; margin-inline: -14%; }
  .fita--rodape { transform: none; width: 100%; margin-inline: 0; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .revela, .js .hero__h1 .linha, .js .hero__base,
  .js .etiqueta, .js .hero__figura, .js .titulo-mask > span { opacity: 1; transform: none; }
  .js .etiqueta { transform: rotate(-1.6deg); }
  .js .hero__foto { transform: none; }
  .js .hero__numero { opacity: 1; transform: translateX(-50%); }
  .js .revela .batalha__moldura img,
  .js .revela .quemsou__moldura img { transform: translateX(-50%); }
  .batalha__moldura::after, .quemsou__moldura::after { display: none; }
  .js .flutua { transform: none !important; }
  .js .palavra, .js .sobe { opacity: 1 !important; transform: none !important; }
}

@media print {
  .topo, .flutuante, .progresso, .fita, .legal-topo, .padrao { display: none; }
  body { background: #fff; color: #000; }
}