/* =========================================================
   PAMELYS BARROS 3099 — Landing Page
   Identidade visual: BRAVA LAB
   Tipografia: Arboria (Adobe Fonts) + Tusker Grotesk
   ========================================================= */

@font-face {
  font-family: "Tusker Grotesk";
  src: url("assets/fonts/TuskerGrotesk-6700Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tusker Grotesk";
  src: url("assets/fonts/TuskerGrotesk-6800Super.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tusker Grotesk Alta";
  src: url("assets/fonts/TuskerGrotesk-7700Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta oficial */
  --rosa:        #F12B7E;
  --rosa-claro:  #FF4696;
  --rosa-pastel: #FFA2D0;
  --amarelo:     #FFAA00;
  --amarelo-cl:  #FFC544;
  --creme:       #F8E4C5;
  --roxo:        #6510B3;
  --roxo-fundo:  #4E0C8B;
  --roxo-claro:  #8160B6;
  --lilas:       #C276FF;
  --laranja:     #FF6500;
  --bege:        #BA9968;

  --tinta:       #14061F;
  --papel:       #F6F3F0;
  --papel-puro:  #FFFFFF;

  --fonte-texto:  arboria, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Tusker Grotesk", "Arial Narrow", Impact, sans-serif;
  --fonte-alta:   "Tusker Grotesk Alta", "Tusker Grotesk", "Arial Narrow", sans-serif;

  --wrap: 1240px;
  --raio: 26px;
  --borda: 3px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --mola: cubic-bezier(.34, 1.56, .48, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--rosa); color: #fff; }

:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: #fff; padding: 12px 18px; z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

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

/* alvos de âncora: o topo é fixo, então a seção não pode parar embaixo dele */
:target,
#para-quem, #bandeiras, #grupo, #redes {
  scroll-margin-top: calc(var(--topo-alt, 74px) + 1rem);
}

/* ---------- Texturas ---------- */
.grade {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}
.raios {
  position: absolute;
  top: 50%; left: 50%;
  width: 190vmax; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,.085) 0deg 9deg, transparent 9deg 24deg,
    rgba(255,255,255,.085) 24deg 33deg, transparent 33deg 48deg,
    rgba(255,255,255,.085) 48deg 57deg, transparent 57deg 72deg,
    rgba(255,255,255,.085) 72deg 81deg, transparent 81deg 96deg,
    rgba(255,255,255,.085) 96deg 105deg, transparent 105deg 120deg,
    rgba(255,255,255,.085) 120deg 129deg, transparent 129deg 144deg,
    rgba(255,255,255,.085) 144deg 153deg, transparent 153deg 168deg,
    rgba(255,255,255,.085) 168deg 177deg, transparent 177deg 192deg,
    rgba(255,255,255,.085) 192deg 201deg, transparent 201deg 216deg,
    rgba(255,255,255,.085) 216deg 225deg, transparent 225deg 240deg,
    rgba(255,255,255,.085) 240deg 249deg, transparent 249deg 264deg,
    rgba(255,255,255,.085) 264deg 273deg, transparent 273deg 288deg,
    rgba(255,255,255,.085) 288deg 297deg, transparent 297deg 312deg,
    rgba(255,255,255,.085) 312deg 321deg, transparent 321deg 336deg,
    rgba(255,255,255,.085) 336deg 345deg, transparent 345deg 360deg);
  mask-image: radial-gradient(closest-side, transparent 4%, rgba(0,0,0,.45) 22%, rgba(0,0,0,.5) 40%, transparent 70%);
  opacity: .8;
  animation: girar 160s linear infinite;
}
.raios--rosa { opacity: .5; }
@keyframes girar { to { rotate: 360deg; } }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  --btn-bg: var(--rosa);
  --btn-fg: #fff;
  --btn-sombra: var(--tinta);
  display: inline-flex; align-items: center; gap: .6em;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--fonte-texto);
  font-weight: 700; letter-spacing: .01em;
  text-decoration: none;
  padding: .95em 1.5em;
  border-radius: 999px;
  border: var(--borda) solid var(--tinta);
  box-shadow: 5px 6px 0 var(--btn-sombra);
  transition: translate .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  will-change: translate;
}
.btn:hover { translate: -2px -3px; box-shadow: 8px 10px 0 var(--btn-sombra); }
.btn:active { translate: 3px 4px; box-shadow: 1px 2px 0 var(--btn-sombra); }
.btn span { transition: translate .18s var(--ease); }
.btn:hover span { translate: 2px -2px; }

.btn--sm  { font-size: .82rem; padding: .7em 1.15em; box-shadow: 3px 4px 0 var(--btn-sombra); }
.btn--lg  { font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); }
.btn--xl  { font-size: clamp(1.05rem, .95rem + .6vw, 1.45rem); padding: 1em 1.9em; }
.btn--block { flex: 1; justify-content: center; font-size: .85rem; padding: .85em .6em; }

.btn--rosa    { --btn-bg: var(--rosa); }
.btn--amarelo { --btn-bg: var(--amarelo); --btn-fg: var(--tinta); }
.btn--roxo    { --btn-bg: var(--roxo); }
.btn--claro   { --btn-bg: var(--papel-puro); --btn-fg: var(--tinta); }

/* =========================================================
   TOPO
   ========================================================= */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(78, 12, 139, .92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255,255,255,.14);
  transition: background-color .3s var(--ease);
}
.topo__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 0;
}
.topo__logo img {
  width: clamp(164px, 19vw, 232px); height: auto;
  transition: width .35s var(--ease);
}
.topo__cta { flex-shrink: 0; }

/* estado compacto ao rolar */
.topo--rolado {
  background: rgba(30, 4, 56, .95);
  box-shadow: 0 10px 30px rgba(10, 0, 25, .35);
}
.topo--rolado .topo__inner { padding: .45rem 0; }
.topo--rolado .topo__logo img { width: clamp(140px, 15vw, 182px); }

/* =========================================================
   SEÇÃO 01 — HERO
   ========================================================= */
.hero {
  position: relative;
  background: var(--roxo-fundo);
  background-image: radial-gradient(120% 100% at 78% 12%, #7A19CE 0%, #4E0C8B 55%, #3B0669 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg .raios { top: 34%; left: 74%; opacity: .55; }

.hero__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 1.35rem;
}
.hero__eyebrow::before {
  content: ""; width: 34px; height: 3px; background: var(--rosa); border-radius: 2px;
}
.hero__eyebrow b {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem; letter-spacing: .04em; color: #fff; line-height: 1;
}

.hero__h1 {
  font-family: var(--fonte-alta);
  font-weight: 700;
  font-size: clamp(2.35rem, 1rem + 3.5vw, 4.6rem);
  letter-spacing: .005em;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__h1 em {
  display: block;
  font-style: normal;
  color: var(--amarelo);
}

.hero__sub {
  max-width: 34ch;
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  color: #F3E8FF;
}

.hero__acoes { margin-top: 2rem; }
.hero .btn { --btn-sombra: #2A0450; }

.hero__assinatura {
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
  margin: 2.4rem 0 clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 2px solid rgba(255,255,255,.18);
}
.hero__nome { display: flex; flex-direction: column; }
.hero__nome strong {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem; letter-spacing: .03em; color: var(--rosa-claro); line-height: 1.05;
}
.hero__nome span {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.68);
}

/* pilha de avatares — candidata + apoiadores */
.avatares { display: flex; align-items: center; gap: .55rem; }
.avatares__eu img {
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid var(--amarelo);
  background: #fff;
  box-shadow: 0 6px 18px rgba(20,3,40,.4);
}
.avatares__grupo { display: flex; align-items: center; }
.avatares__grupo > * {
  width: 50px; height: 50px; border-radius: 50%;
  border: 3px solid var(--roxo-fundo);
  background: #fff;
  margin-left: -14px;
}
.avatares__grupo > *:first-child { margin-left: 0; }

.hero__figura {
  /* diâmetro do disco amarelo — em unidades absolutas porque a máscara do
     retrato reusa esse valor e % resolveria contra a caixa errada */
  --disco: min(90vw, 460px);
  position: relative;
  align-self: end;
  min-height: 320px;
  display: flex; align-items: flex-end; justify-content: center;
}
.hero__figura::before {
  content: "";
  position: absolute;
  bottom: 0; left: 50%; translate: -50% 0;
  width: var(--disco); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFC544 0%, #FFAA00 55%, #F59000 100%);
  /* disco sólido, sem fade e sem deslocamento: o recorte do retrato usa
     exatamente este círculo. Qualquer diferença entre os dois abre uma
     meia-lua escura da figura por baixo do amarelo. */
}
.hero__retrato {
  position: relative;
  /* nada de deslocamento vertical aqui: o retrato tem que ficar travado no
     disco amarelo, senão o recorte pelo arco sai do lugar */
  width: min(100%, 470px);
  /* SEM filter/drop-shadow aqui de propósito: o drop-shadow lê o alpha do
     recorte e vira um borrão retangular por cima do círculo amarelo
     (aparecia como faixas verticais). A base dissolvida já dá a profundidade. */

  /* A base é recortada PELO disco amarelo: a máscara é a união de
     (1) tudo acima do centro do disco — deixa a cabeça passar por cima — com
     (2) o próprio disco. Assim o corpo termina acompanhando o arco, em vez de
     escapar por baixo do círculo. */
  /* corte seco: a transição do gradiente é de 1px só para o antialias
     acompanhar a borda do disco — nada de fade/blur no recorte */
  --raio: calc(var(--disco) / 2);
  mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle at 50% calc(100% - var(--raio)),
                    #000 calc(var(--raio) - .5px), transparent calc(var(--raio) + .5px));
  mask-size: 100% calc(100% - var(--raio)), 100% 100%;
  mask-position: top center, center;
  mask-repeat: no-repeat;
  mask-composite: add;
}

/* =========================================================
   FAIXA MARQUEE
   ========================================================= */
.faixa {
  background: var(--rosa);
  border-block: var(--borda) solid var(--tinta);
  padding: .85rem 0;
  overflow: hidden;
}
.faixa__trilho {
  display: flex; width: max-content;
  animation: correr 42s linear infinite;
}
.faixa__grupo { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; }
.faixa__grupo img { height: 24px; width: auto; opacity: .95; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes correr { to { translate: -50% 0; } }

/* =========================================================
   SEÇÃO 02 — VOTO
   ========================================================= */
.voto {
  background: var(--papel-puro);
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  /* o "VOTE 3099!" entra ampliado (animação de carimbo);
     sem isso o excesso vira barra de rolagem horizontal no celular */
  overflow-x: clip;
}
.voto__topo { text-align: center; }
.voto__h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--fonte-alta);
  font-size: clamp(1.7rem, 1rem + 2.9vw, 3.4rem);
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.05;
}
.voto__grito {
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 1rem + 7.6vw, 7.6rem);
  line-height: .95;
  letter-spacing: -.005em;
  color: var(--rosa);
  margin: .25em 0 .1em;
  white-space: nowrap;
}
.voto__grito span { color: var(--amarelo); }
.voto__linha {
  font-weight: 700;
  font-size: clamp(.95rem, .85rem + .4vw, 1.2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--roxo);
  max-width: none;
}

.promessas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.promessa {
  background: var(--papel);
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: 6px 7px 0 var(--tinta);
  transition: translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.promessa:nth-child(1) { background: #FFF0F6; }
.promessa:nth-child(2) { background: #FFF6E2; }
.promessa:nth-child(3) { background: #F3ECFF; }
.promessa:nth-child(4) { background: #FFF0F6; }
.promessa:hover { translate: -3px -4px; box-shadow: 10px 12px 0 var(--tinta); }
.promessa h3 {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: .7rem;
}
/* selo de confirmação — círculo cheio + check de traço arredondado,
   no mesmo desenho geométrico da identidade */
.selo {
  --selo-bg: var(--rosa);
  --selo-fg: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--selo-bg);
  color: var(--selo-fg);
  border: 2px solid var(--tinta);
  margin-bottom: 1.15rem;
  transition: scale .4s var(--mola), rotate .4s var(--mola);
}
.selo svg { width: 1.35rem; height: 1.35rem; }

.selo--mini {
  width: 1.55rem; height: 1.55rem;
  margin-bottom: 0;
  border-width: 0;
  --selo-bg: var(--amarelo);
  --selo-fg: var(--tinta);
}
.selo--mini svg { width: .95rem; height: .95rem; }

.promessa:nth-child(1) .selo { --selo-bg: var(--rosa); }
.promessa:nth-child(2) .selo { --selo-bg: var(--amarelo); --selo-fg: var(--tinta); }
.promessa:nth-child(3) .selo { --selo-bg: var(--roxo); }
.promessa:nth-child(4) .selo { --selo-bg: var(--rosa); }
.promessa:hover .selo { scale: 1.12; rotate: -8deg; }
.promessa p { font-size: 1rem; line-height: 1.45; color: #3B2B49; }

/* =========================================================
   SEÇÃO 02 — NÚMEROS
   ========================================================= */
.numeros {
  background: var(--amarelo);
  border-block: var(--borda) solid var(--tinta);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.numeros__h2 {
  font-family: var(--fonte-alta);
  font-size: clamp(1.5rem, .9rem + 2.5vw, 2.9rem);
  text-transform: uppercase;
  color: var(--tinta);
  max-width: 28ch;
  line-height: 1.05;
}
.numeros__h2 em { display: block; font-style: normal; color: var(--roxo); }

.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem 1.2rem;
  margin-top: clamp(2.2rem, 4vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: var(--borda) solid var(--tinta);
}
.placar li { display: flex; flex-direction: column; gap: .35rem; }
.placar__n {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.9rem, 1.5rem + 4.4vw, 5rem);
  line-height: .95;
  color: var(--roxo);
}
.placar__t {
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5A3C00;
  max-width: 22ch;
  line-height: 1.35;
}

/* =========================================================
   CANDIDATA EM AÇÃO
   ========================================================= */
.acao { background: var(--papel); padding: clamp(3rem, 6vw, 5rem) 0; }
.rotulo {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rosa);
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2rem;
}
.rotulo::after {
  content: ""; flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rosa), transparent);
}
.acao__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.6rem);
}
.acao__grid li { transition: translate .3s var(--ease); }
.acao__grid li:nth-child(even) { translate: 0 clamp(.8rem, 2vw, 2rem); }
.acao__grid li:hover { translate: 0 -10px; }
.acao__grid li:nth-child(even):hover { translate: 0 calc(clamp(.8rem, 2vw, 2rem) - 10px); }
.acao__grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  border: var(--borda) solid var(--tinta);
  transition: rotate .45s var(--mola), box-shadow .3s var(--ease);
}
.acao__grid li:hover img {
  rotate: -3deg;
  box-shadow: 0 16px 30px rgba(20, 6, 31, .22);
}
.acao__grid li:nth-child(even):hover img { rotate: 3deg; }

/* =========================================================
   QUEM SOU
   ========================================================= */
.quem { background: var(--papel); padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 7vw, 6.5rem); }

.citacao {
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  background: var(--roxo);
  color: #fff;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  padding: clamp(2rem, 4vw, 3.4rem);
  box-shadow: 10px 12px 0 var(--rosa);
  position: relative;
  overflow: hidden;
}
.citacao::before {
  content: "\201C";
  position: absolute; top: -.16em; right: .04em;
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 16rem; line-height: 1;
  color: rgba(255,255,255,.09);
  pointer-events: none;
}
.citacao blockquote { margin: 0; }
.citacao p {
  font-size: clamp(1.1rem, .95rem + .8vw, 1.65rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 46ch;
  position: relative;
}
.citacao figcaption {
  display: flex; flex-direction: column;
  margin-top: 1.8rem; padding-top: 1.2rem;
  border-top: 2px solid rgba(255,255,255,.2);
}
.citacao figcaption strong {
  font-family: var(--fonte-titulo);
  font-size: 1.55rem; letter-spacing: .03em; color: var(--amarelo);
}
.citacao figcaption span {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.68);
}

.quem__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}
.quem__foto img {
  width: 100%;
  border-radius: 50%;
  border: var(--borda) solid var(--tinta);
  box-shadow: 10px 12px 0 var(--amarelo);
}
.quem__legenda {
  margin-top: 1.6rem;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  line-height: 1.3;
  color: var(--rosa);
  text-wrap: balance;
}
.quem__texto { display: grid; gap: 1.25rem; }
.quem__texto p {
  font-size: clamp(1rem, .95rem + .28vw, 1.15rem);
  line-height: 1.62;
  color: #34243F;
}
.quem__texto p:first-child::first-letter {
  font-family: var(--fonte-titulo);
  float: left;
  font-size: 3.6em;
  line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--roxo);
}

/* =========================================================
   SEÇÃO 03 — BANDEIRAS
   ========================================================= */
.bandeiras {
  position: relative;
  background: #2E0553;
  background-image: radial-gradient(110% 80% at 20% 0%, #5A0FA1 0%, #2E0553 60%);
  color: #fff;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  isolation: isolate;
  overflow: hidden;
}
.bandeiras__bg { position: absolute; inset: 0; z-index: -1; }
.bandeiras__h2 {
  font-family: var(--fonte-alta);
  font-size: clamp(1.5rem, .9rem + 2.6vw, 3rem);
  text-transform: uppercase;
  max-width: 26ch;
  line-height: 1.05;
  color: var(--amarelo);
}
.bandeiras__h2 em { display: block; font-style: normal; color: #fff; }

.bandeiras__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bandeira {
  position: relative;
  background: rgba(255,255,255,.055);
  border: 2px solid rgba(255,255,255,.16);
  border-radius: var(--raio);
  padding: 2.2rem 1.6rem 1.7rem;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), translate .22s var(--ease);
}
.bandeira::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(241,43,126,.28), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.bandeira:hover::before { opacity: 1; }
.bandeira:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--rosa);
  translate: 0 -5px;
}
.bandeira__num {
  position: absolute; top: 1rem; right: 1.3rem;
  font-family: var(--fonte-titulo);
  font-size: 2.6rem; line-height: 1;
  color: rgba(255,255,255,.16);
  transition: color .28s var(--ease), scale .4s var(--mola);
  transform-origin: 100% 0;
}
.bandeira:hover .bandeira__num { color: var(--rosa); scale: 1.12; }
.bandeira h3 { transition: color .28s var(--ease); }
.bandeira:hover h3 { color: #fff; }
.bandeira h3 {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: .75rem;
  max-width: 20ch;
}
.bandeira p { font-size: .98rem; line-height: 1.5; color: rgba(255,255,255,.82); }

/* =========================================================
   GRUPO DE WHATSAPP
   ========================================================= */
.grupo { background: #2E0553; padding: 0 0 clamp(3.5rem, 7vw, 6rem); }
.grupo__card {
  background: var(--rosa);
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: 12px 14px 0 var(--amarelo);
  padding: clamp(2rem, 4vw, 3.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  color: #fff;
}
.grupo__h2 {
  font-family: var(--fonte-alta);
  font-size: clamp(1.45rem, .9rem + 2.2vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.05;
  max-width: 21ch;
}
.grupo__sub {
  margin: 1.2rem 0 1.9rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  font-weight: 500;
  max-width: 36ch;
  color: #FFE9F3;
}
.grupo .btn { --btn-sombra: #7A0B3C; }
.grupo__lista { display: grid; gap: .8rem; }
.grupo__lista li {
  display: flex; gap: .85rem; align-items: flex-start;
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 16px;
  padding: 1rem 1.15rem;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.35;
}
.grupo__lista li .selo--mini { align-self: flex-start; }

/* =========================================================
   SEÇÃO 04 — REDES SOCIAIS
   ========================================================= */
.redes-secao {
  position: relative;
  background: var(--amarelo);
  border-top: var(--borda) solid var(--tinta);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.redes-secao__bg { position: absolute; inset: 0; z-index: -1; opacity: .55; }
.redes-secao__bg .raios {
  background: conic-gradient(from 0deg,
    rgba(241,43,126,.22) 0deg 10deg, transparent 10deg 30deg,
    rgba(241,43,126,.22) 30deg 40deg, transparent 40deg 60deg,
    rgba(241,43,126,.22) 60deg 70deg, transparent 70deg 90deg,
    rgba(241,43,126,.22) 90deg 100deg, transparent 100deg 120deg,
    rgba(241,43,126,.22) 120deg 130deg, transparent 130deg 150deg,
    rgba(241,43,126,.22) 150deg 160deg, transparent 160deg 180deg,
    rgba(241,43,126,.22) 180deg 190deg, transparent 190deg 210deg,
    rgba(241,43,126,.22) 210deg 220deg, transparent 220deg 240deg,
    rgba(241,43,126,.22) 240deg 250deg, transparent 250deg 270deg,
    rgba(241,43,126,.22) 270deg 280deg, transparent 280deg 300deg,
    rgba(241,43,126,.22) 300deg 310deg, transparent 310deg 330deg,
    rgba(241,43,126,.22) 330deg 340deg, transparent 340deg 360deg);
}
.redes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.redes__h2 {
  font-family: var(--fonte-alta);
  font-size: clamp(1.35rem, .9rem + 2vw, 2.4rem);
  text-transform: uppercase;
  color: var(--roxo);
  line-height: 1.05;
  max-width: 16ch;
}
/* mockup do perfil do Instagram, vestido na identidade da campanha */
.perfil {
  width: min(100%, 540px);
  background: var(--papel-puro);
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: 10px 12px 0 var(--roxo);
  padding: 1.9rem 1.9rem 1.75rem;
}
.perfil__topo { display: flex; align-items: center; gap: 1.2rem; }
.perfil__foto {
  width: 100px; height: 100px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--rosa);
}
.perfil__id { min-width: 0; }
.perfil__nome {
  display: flex; align-items: center; gap: .38rem;
  font-size: 1.3rem; font-weight: 800; line-height: 1.2;
  color: var(--tinta);
}
.perfil__selo { width: 1.05em; height: 1.05em; flex-shrink: 0; color: #3897F0; }
.perfil__arroba {
  font-size: 1.02rem; font-weight: 600; color: var(--rosa);
  margin-top: .15rem;
}

.perfil__bio {
  margin-top: 1.3rem;
  font-size: 1.02rem;
  line-height: 1.6;
  text-wrap: pretty;   /* evita o emoji sobrando sozinho na última linha */
  color: #3B2B49;
}

.perfil__acoes { display: flex; gap: .7rem; margin-top: 1.5rem; }
.perfil__acoes .btn {
  flex: 1; justify-content: center;
  padding-inline: 1em;       /* "Enviar mensagem" precisa caber em uma linha */
  white-space: nowrap;
}
.perfil .btn { --btn-sombra: var(--tinta); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  background: var(--tinta);
  color: rgba(255,255,255,.6);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(6rem, 10vw, 3.5rem);
}
.rodape__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.rodape__logo { width: 215px; }
.rodape__legal {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* =========================================================
   BARRA FIXA (MOBILE)
   ========================================================= */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: none;
  gap: .6rem;
  padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(20, 6, 31, .92);
  backdrop-filter: blur(10px);
  border-top: 2px solid rgba(255,255,255,.14);
}
.barra .btn { --btn-sombra: transparent; box-shadow: none; border-width: 2px; }

/* =========================================================
   ANIMAÇÃO DE ENTRADA
   ========================================================= */
.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .7s var(--ease), translate .7s var(--ease), scale .7s var(--mola);
  transition-delay: var(--atraso, 0ms);
}
.js .reveal.visivel { opacity: 1; translate: 0 0; scale: 1; }

/* variação: entra crescendo */
.js .reveal--pop { translate: 0 18px; scale: .82; }

/* variação: carimbo — cai de cima com um leve exagero */
.js .reveal--carimbo { translate: 0 -10px; scale: 1.14; }
.js .reveal--carimbo.visivel { animation: carimbar .75s var(--mola) var(--atraso, 0ms) both; }
@keyframes carimbar {
  0%   { opacity: 0; scale: 1.14; translate: 0 -10px; }
  55%  { opacity: 1; scale: .96;  translate: 0 0; }
  78%  { scale: 1.025; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

/* =========================================================
   BARRA DE PROGRESSO DE LEITURA
   ========================================================= */
.progresso {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: 4px; pointer-events: none;
}
.progresso i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--rosa), var(--amarelo));
  transform-origin: 0 50%;
  scale: var(--lido, 0) 1;
}

/* =========================================================
   ENTRADA DO HERO (coreografia no carregamento)
   ========================================================= */
@keyframes entrar {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
/* disco + retrato entram como uma peça só: se um se mover em relação ao
   outro, o recorte pelo arco sai do lugar durante a animação */
@keyframes entrarFigura {
  from { opacity: 0; translate: 0 52px; }
  to   { opacity: 1; translate: 0 0; }
}

.js .hero__eyebrow,
.js .hero__h1 .linha,
.js .hero__sub,
.js .hero__acoes,
.js .hero__assinatura { opacity: 0; }

.js .hero__figura { opacity: 0; }

.js.pronto .hero__eyebrow      { animation: entrar .7s var(--ease)  .05s both; }
.js.pronto .hero__h1 .linha:nth-child(1) { animation: entrar .8s var(--ease) .14s both; }
.js.pronto .hero__h1 .linha:nth-child(2) { animation: entrar .8s var(--ease) .24s both; }
.js.pronto .hero__h1 .linha:nth-child(3) { animation: entrar .8s var(--ease) .34s both; }
.js.pronto .hero__sub          { animation: entrar .8s var(--ease)  .48s both; }
.js.pronto .hero__acoes        { animation: entrar .8s var(--mola)  .58s both; }
.js.pronto .hero__assinatura   { animation: entrar .8s var(--ease)  .68s both; }
.js.pronto .hero__figura       { animation: entrarFigura .95s var(--ease) .18s both; }

/* avatares entram um a um */
.js .avatares__eu img,
.js .avatares__grupo > * { opacity: 0; }
.js.pronto .avatares__eu img       { animation: pipocar .55s var(--mola) .78s both; }
.js.pronto .avatares__grupo > *:nth-child(1) { animation: pipocar .55s var(--mola) .88s both; }
.js.pronto .avatares__grupo > *:nth-child(2) { animation: pipocar .55s var(--mola) .96s both; }
.js.pronto .avatares__grupo > *:nth-child(3) { animation: pipocar .55s var(--mola) 1.04s both; }
@keyframes pipocar {
  from { opacity: 0; scale: .4; }
  60%  { scale: 1.12; }
  to   { opacity: 1; scale: 1; }
}

/* =========================================================
   HERO + FAIXA CABENDO EM UMA TELA
   O topo é sticky e fica no fluxo, então:
   topo + hero + faixa = 100svh.
   As alturas de topo e faixa são medidas pelo script.js;
   os fallbacks cobrem o primeiro paint.
   ========================================================= */
@media (min-width: 1001px) and (min-height: 600px) {
  /* a altura vai no .hero__inner para não mexer na largura máxima nem nas
     margens automáticas — o .hero só acompanha o conteúdo */
  .hero__inner {
    min-height: calc(100svh - var(--topo-alt, 74px) - var(--faixa-alt, 60px));
    align-items: stretch;
    padding-top: 0;
  }

  .hero__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(.5rem, 1.4vh, 1.75rem);
  }

  /* o título também obedece à altura da tela, para caber em notebooks baixos */
  .hero__h1 { font-size: clamp(2.1rem, min(1rem + 3.2vw, 6.2vh), 4.4rem); }
  .hero__sub { margin-top: clamp(.8rem, 1.8vh, 1.5rem); }
  .hero__acoes { margin-top: clamp(1rem, 2.4vh, 1.9rem); }
  .hero__assinatura {
    margin: clamp(1.1rem, 2.6vh, 2.2rem) 0 0;
    padding-top: clamp(.85rem, 1.8vh, 1.4rem);
  }

  /* o retrato sai do fluxo: assim a altura da seção é ditada pelo texto
     e a foto se ajusta ao espaço que sobra, sem cortar */
  /* o disco acompanha o retrato, que é dimensionado pela altura da tela */
  .hero__figura { align-self: stretch; min-height: 0; --disco: clamp(420px, 44vw, 620px); }
  .hero__retrato {
    position: absolute;
    /* centralizado por margem automática, não por translate:
       o translate é usado pela animação de entrada */
    left: 0; right: 0; margin-inline: auto;
    top: auto;
    bottom: 0;
    height: 100%; width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figura { order: 2; min-height: 0; margin-top: -1rem; }
  .hero__retrato { width: min(78%, 400px); }
  .hero__assinatura { margin-bottom: 1.5rem; }

  .bandeiras__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quem__grid { grid-template-columns: 1fr; }
  .quem__foto img { width: min(100%, 380px); }
  .grupo__card { grid-template-columns: 1fr; }
  .acao__grid { grid-template-columns: repeat(3, 1fr); }
  .acao__grid li:nth-child(even) { translate: 0; }
  .acao__grid li:nth-child(even):hover { translate: 0 -8px; }
}

@media (max-width: 760px) {
  .barra { display: flex; }
  .topo__cta { display: none; }
  /* "VOTE 3099!" é nowrap: precisa caber na largura da tela */
  .voto__grito { font-size: clamp(2rem, 12.5vw, 6rem); }
  .redes { flex-direction: column; align-items: flex-start; }
  .perfil { width: 100%; }
  .redes__info { flex: 1; }
  .citacao { box-shadow: 6px 8px 0 var(--rosa); }
  .quem__foto img { box-shadow: 6px 8px 0 var(--amarelo); }
  .grupo__card { box-shadow: 7px 9px 0 var(--amarelo); }
}

@media (max-width: 520px) {
  .acao__grid { grid-template-columns: repeat(2, 1fr); }
  .bandeiras__grid { grid-template-columns: 1fr; }
  .rodape__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal,
  .js .hero__eyebrow,
  .js .hero__h1 .linha,
  .js .hero__sub,
  .js .hero__acoes,
  .js .hero__assinatura,
  .js .hero__figura,
  .js .avatares__eu img,
  .js .avatares__grupo > * {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }
  .progresso { display: none; }
}

/* rede de segurança: se o JS não rodar, nada fica invisível */
@media (scripting: none) {
  .js .reveal,
  .js .hero__eyebrow,
  .js .hero__h1 .linha,
  .js .hero__sub,
  .js .hero__acoes,
  .js .hero__assinatura,
  .js .hero__figura { opacity: 1; translate: none; scale: 1; }
}