/* ============================================================
   LP MATHEUS SPERRY
   Transcricao fiel do mockup aprovado no Claude Design.
   Cada bloco abaixo corresponde a uma <section> do original.
   ============================================================ */

/* ---------- 1. BASE ---------- */

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

html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--green-link-hv); }

::selection { background: var(--yellow); color: var(--navy); }

/* Foco visivel de teclado. Nao existia no mockup e e obrigatorio
   para navegacao acessivel. So aparece em navegacao por teclado. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible { outline-color: var(--yellow); }

/* Pular para o conteudo, so aparece no foco */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 99;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-hard);
  text-decoration: none;
  font-weight: 600;
  transition: top .18s;
}
.skip-link:focus { top: 16px; color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- 2. PECAS RECORRENTES ---------- */

/* Reset de margem dos elementos que no mockup eram <div> e aqui viraram
   <p>/<h3> por semântica. Sem isso, a margem padrão do parágrafo desloca
   o layout e a peça deixa de bater com o design aprovado. */
.eyebrow, .stat__num, .cargo__text, .cargo__claim, .kicker,
.recebido__label, .recebido__value, .fatos__foot, .prova__title,
.prova__detail, .prova__flag, .depo__name, .bandeira-card__num {
  margin: 0;
}

/* pilula "RIO GRANDE DO SUL" / "O COMPROMISSO" / "RECEBIDO" */
.eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--navy-line-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex: none;
}
.eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}
.eyebrow__label {
  font-size: var(--t-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-navy-70);
}
.eyebrow--yellow { border-color: rgba(245, 179, 36, .45); }
.eyebrow--yellow .eyebrow__label { color: var(--yellow-soft); }
.eyebrow--green { border-color: rgba(14, 138, 79, .35); }
.eyebrow--green .eyebrow__dot { background: var(--green); }
.eyebrow--green .eyebrow__label { color: var(--green-deep); }

/* blocos escuros de largura total (hero, 4 e 11) */
.slab {
  position: relative;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-bloco);
  overflow: hidden;
}
.slab__inner { position: relative; z-index: 2; }

/* elementos graficos de fundo: halos e aneis */
.glow, .ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ring { border: 1px solid rgba(255, 255, 255, .10); }
.ring--faint { border-color: rgba(255, 255, 255, .06); }
.ring--faint2 { border-color: rgba(255, 255, 255, .07); }

/* card de vidro sobre o azul */
.glass {
  background: var(--navy-glass);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* card branco sobre fundo claro */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.rule { height: 1px; background: var(--line); }
.rule--navy { background: var(--navy-line-2); }

.hl { color: var(--yellow); }
.hl-green { color: var(--green-deep); }

/* cabecalho de duas colunas (blocos 5 e 9) */
.head2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: end;
}
.head2__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2-sm);
  line-height: 1.04;
  margin: 0;
  color: var(--ink-strong);
  max-width: 20ch;
}
.head2__intro {
  font-size: var(--t-19);
  line-height: 1.6;
  margin: 0;
  color: var(--ink-mute-2);
  max-width: 46ch;
}

/* grade de 3 colunas (blocos 5 e 9) */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

.section { padding: var(--pad-sec) var(--gutter); }

/* COLUNA DE CONTEÚDO ÚNICA.
   O mockup tinha três larguras diferentes (1328, 1120 e 1040), o que
   fazia as dobras não se alinharem entre si. Aqui todas usam a mesma
   coluna: largura da página menos o gutter dos dois lados. Os blocos
   escuros continuam sangrando 40px a mais de cada lado, mas o texto
   dentro deles cai na mesma linha vertical das demais dobras. */
.wrap-mid, .wrap-narrow { max-width: none; margin: 0 auto; }

/* ---------- BLOCO 0 | HERO ---------- */

.hero {
  position: relative;
  background: var(--bg);
  padding: 16px 16px 0;
}
.hero__slab {
  /* o raio duplo que faz a base arredondada e a assinatura do bloco */
  border-radius: 44px 44px 46% 46% / 44px 44px 140px 140px;
  isolation: isolate;
}
.hero__glow-green {
  width: 820px; height: 820px;
  top: -380px; right: -240px;
  background: radial-gradient(circle at 45% 60%,
              rgba(14, 138, 79, .38), rgba(14, 138, 79, 0) 70%);
  filter: blur(18px);
}
.hero__glow-yellow {
  width: 640px; height: 640px;
  bottom: -300px; left: -160px;
  background: radial-gradient(circle at 50% 50%,
              rgba(245, 179, 36, .3), rgba(245, 179, 36, 0) 66%);
  filter: blur(14px);
}
.hero__ring-a { width: 1100px; height: 1100px; top: 120px; right: -300px; }
.hero__ring-b { width: 860px;  height: 860px;  top: 260px; right: -180px; }

/* A logo da campanha é bem mais alta que a antiga (1,72:1 contra 2,91:1),
   então a folga do texto abaixo dela não pode ser um número chumbado: em
   cada breakpoint a logo muda de tamanho e a folga tem que acompanhar.
   Aqui ela é calculada. 0.582 é a proporção da arte (652/1120), e 46px é
   o respiro. Mudando só --logo-larg, todo o resto se ajusta sozinho. */
.hero {
  --logo-larg: 160px;
  --logo-topo: 40px;
  --logo-folga: 46px;
}
.hero__logo {
  position: absolute;
  top: var(--logo-topo);
  left: 40px;             /* 16 do bloco + 40 = mesma coluna do resto */
  z-index: 4;
  width: var(--logo-larg);
  height: auto;
  display: block;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 0;
  min-height: 740px;
}
.hero__text {
  /* 40px de padding lateral sobre os 16px do bloco dá 56px de margem, a
     mesma linha vertical em que começa o texto de todas as outras dobras.
     O topo sai da conta da logo, para o texto nunca encostar nela. */
  padding: calc(var(--logo-topo) + var(--logo-larg) * 0.582 + var(--logo-folga))
           40px 90px 40px;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.hero__text .eyebrow { margin-bottom: 34px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: .96;
  letter-spacing: -.012em;
  margin: 0 0 26px;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__sub {
  font-size: var(--t-22);
  line-height: 1.5;
  font-weight: 300;
  color: var(--on-navy-80);
  margin: 0 0 26px;
  max-width: 34ch;
}
.hero__claim {
  font-size: var(--t-23);
  line-height: 1.45;
  margin: 0;
  max-width: 36ch;
  font-weight: 600;
}

.hero__figure {
  position: relative;
  height: 100%;
  min-height: 740px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* halo de luz atras do recorte */
.hero__halo {
  position: absolute;
  bottom: 8%; left: -6%; right: -6%; top: 6%;
  background: radial-gradient(58% 62% at 50% 42%,
              rgba(255, 247, 232, .16),
              rgba(255, 247, 232, .05) 55%,
              rgba(255, 247, 232, 0) 78%);
  pointer-events: none;
}
/* sombra de contato no pe da foto */
.hero__ground {
  position: absolute;
  bottom: 6%; left: 14%; right: 14%;
  height: 70px;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(6, 14, 26, .55), rgba(6, 14, 26, 0) 72%);
  pointer-events: none;
}
.hero__photo {
  position: relative;
  height: 94%;
  max-height: 710px;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  /* o `filter: saturate(.92) contrast(1.03)` do mockup agora está
     gravado no próprio arquivo, por build_images.py. Mesmo resultado
     visual, sem custo de composição a cada frame. */
}

/* ---------- BLOCO 1 | A CADEIRA VAZIA ---------- */

.cadeira { background: var(--bg); padding: var(--pad-sec) var(--gutter); }
.cadeira__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: start;
}
.cadeira__p1 {
  font-size: var(--t-29);
  line-height: 1.35;
  font-weight: 300;
  margin: 0 0 22px;
  color: var(--ink-soft);
}
.cadeira__p2 {
  font-size: var(--t-29);
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  color: var(--navy);
}
.stat { border-left: 2px solid var(--navy); padding-left: 34px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-numero);
  line-height: .85;
  color: var(--navy);
  letter-spacing: -.02em;
}
.stat__legend {
  font-size: var(--t-19);
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: 32ch;
  color: var(--ink-body);
}
.stat__claim {
  font-size: var(--t-23);
  line-height: 1.4;
  margin: 30px 0 0;
  font-weight: 600;
  color: var(--green-deep);
}

/* ---------- BLOCO 2 | EU PODERIA TER SIDO UM DELES ---------- */

.deles {
  background: var(--bg-alt);
  padding: var(--pad-sec-m) var(--gutter);
  border-top: 1px solid var(--line);
}
.deles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: start;
}
.deles__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2-lg);
  line-height: .98;
  margin: 0 0 28px;
  color: var(--navy);
  max-width: 16ch;
}
.deles__p {
  font-size: var(--t-20);
  line-height: 1.6;
  margin: 0 0 18px;
  color: var(--ink-body);
  max-width: 40ch;
}
.deles__claim {
  font-size: var(--t-22);
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
  color: var(--green-deep);
  max-width: 34ch;
}
.deles__card {
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
}
.deles__card p:first-child {
  font-size: var(--t-20);
  line-height: 1.6;
  margin: 0;
  color: var(--ink-body);
}
.deles__card-claim {
  font-size: var(--t-23);
  line-height: 1.4;
  margin: 0;
  font-weight: 600;
  color: var(--navy);
}

/* Tira de documentos do bloco 2.

   Fecha o bloco com a prova do que ele acabou de afirmar. E uma TIRA e
   nao uma galeria: o papel entra pequeno, com a mesma altura da linha
   de texto ao lado, porque o assunto do bloco e a escolha de ficar e
   nao o curriculo. Se o documento crescer, ele rouba o bloco.

   O cartao inteiro e o link. No celular isso e a diferenca entre um
   alvo de 12px e um alvo do tamanho do dedo. */
.papeis {
  margin-top: clamp(36px, 3.6vw, 56px);
  padding-top: clamp(26px, 2.4vw, 34px);
  border-top: 1px solid var(--line-3);
}
.papeis__kicker { margin-bottom: 18px; }
.papeis__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}
.papel__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-hard);
  padding: 16px 20px 16px 16px;
  text-decoration: none;
  height: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.papel__link:hover,
.papel__link:focus-visible {
  border-color: var(--green-deep);
  box-shadow: 0 10px 26px rgba(16, 35, 60, .10);
  transform: translateY(-2px);
}
/* o papel: sombra curta e borda fina, o suficiente para ler como
   documento fotografado e nao como bloco de cor */
.papel__capa {
  display: block;
  width: 132px;
  flex: none;
}
.papel__capa img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-4);
  box-shadow: 0 4px 14px rgba(16, 35, 60, .12);
  background: #fff;
}
.papel__texto {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.papel__rotulo {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.papel__titulo {
  font-size: var(--t-19);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}
.papel__detalhe {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-mute-2);
}
.papel__acao {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--green-deep);
  margin-top: 5px;
}
.papel__acao::after { content: " \2192"; }

/* ---------- BLOCO 3 | O ULTIMATO ---------- */

.ultimato {
  background: var(--surface);
  padding: var(--pad-sec-l) var(--gutter);
}
.ultimato__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: stretch;
}
.ultimato__col {
  display: flex;
  flex-direction: column;
  gap: 26px;
  justify-content: space-between;
}
.ultimato__cena {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1.06;
  margin: 0;
  color: var(--navy);
  max-width: 20ch;
}
.ultimato__punch {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 1.59688rem + 2.25352vw, 58px);
  line-height: 1;
  margin: 0;
  color: var(--green);
}
.ultimato__media {
  width: 100%;
  height: 300px;
  border-radius: var(--r-card-2);
  overflow: hidden;
}
.ultimato__media img {
  width: 100%;
  /* 118% de altura, deslocada 9% para cima, dá a folga que o parallax
     usa para deslizar dentro da moldura sem nunca mostrar borda */
  height: 118%;
  position: relative;
  top: -9%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}
.ultimato__nota {
  font-size: var(--t-20);
  line-height: 1.65;
  margin: 0;
  max-width: 46ch;
  color: var(--ink-muted);
}
.ultimato__nota strong { font-weight: 700; color: var(--navy); }

/* ---------- BLOCO 4 | POR QUE EU FIQUEI ---------- */

.fiquei { background: var(--bg); padding: 40px var(--gutter-xs); }
.fiquei__slab { padding: var(--pad-sec-m) 40px calc(var(--pad-sec-m) + 4px); }
.fiquei__glow {
  width: 760px; height: 760px;
  top: -320px; left: -200px;
  background: radial-gradient(circle at 55% 55%,
              rgba(14, 138, 79, .34), rgba(14, 138, 79, 0) 70%);
  filter: blur(16px);
}
.fiquei__ring { width: 900px; height: 900px; bottom: -560px; right: -180px; }
.fiquei__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: stretch;
}
.fiquei__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.fiquei__setup {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.06;
  margin: 0;
  color: var(--on-navy-50);
  max-width: 14ch;
}
.fiquei__punch {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2-lg);
  line-height: 1.05;
  margin: 20px 0 0;
  color: var(--yellow);
  max-width: 16ch;
}
.fiquei__card {
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
}
.fiquei__p1 {
  font-size: var(--t-22);
  line-height: 1.55;
  margin: 0;
  color: var(--on-navy-90);
  font-weight: 300;
}
.fiquei__p2 {
  font-size: var(--t-19);
  line-height: 1.6;
  margin: 0;
  color: var(--on-navy-62);
}

/* ---------- BLOCO 5 | BANDEIRAS ---------- */

.bandeiras { background: var(--bg); padding: var(--pad-sec-m) var(--gutter); }
.bandeiras .head2 { margin-bottom: 44px; }
.bandeiras .head2__title { max-width: 18ch; }

.bandeira-card {
  padding: 30px 30px 32px;
  border-radius: var(--r-card-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bandeira-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bandeira-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--green);
}
.bandeira-card__dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  flex: none;
}
.bandeira-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-bandeira);
  line-height: 1.06;
  color: var(--navy);
  margin: 0;
}
.bandeira-card__text {
  font-size: var(--t-17);
  line-height: 1.55;
  margin: 0;
  color: var(--ink-mute-2);
}

/* Rodapé do card: o princípio que sustenta a bandeira. Fica embaixo da
   tradução pública, separado por um fio e em corpo menor, porque ele
   fundamenta e não anuncia. `margin-top:auto` cola no pé do card, então
   os cinco fios ficam alinhados mesmo com títulos de alturas diferentes. */
.bandeira-card__base {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bandeira-card__versiculo {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-body);
  font-style: italic;
}
/* aspas tipográficas literais. O escape C do CSS foi engolido
   na geração e virava a letra C na tela. */
.bandeira-card__versiculo::before { content: "“"; }
.bandeira-card__versiculo::after  { content: "”"; }
.bandeira-card__ref {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- BLOCO 6 | NAO ACREDITE, CONFIRA ---------- */

.confira {
  background: var(--surface);
  padding: var(--pad-sec) var(--gutter);
  border-top: 3px solid var(--navy);
}
.confira__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 38px;
}
.confira__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2-xs);
  line-height: 1;
  margin: 0;
  color: var(--navy);
  letter-spacing: .01em;
}
.confira__intro {
  font-size: var(--t-17);
  margin: 0;
  color: var(--ink-mute-2);
  max-width: 38ch;
}
/* O documento em destaque do bloco 6.

   A pagina ja ensinou o visitante a ler numero grande no bloco 1, onde
   o "220 mil" e a DOR. Aqui o mesmo gesto tipografico carrega a PROVA,
   e por isso o numero e verde e nao navy. A rima e proposital: os dois
   sao o argumento inteiro condensado em um numero.

   O destaque fica acima da lista e nao dentro dela porque a lista e uma
   fila de pendencias com uma etiqueta cada. Este e o unico item que a
   campanha ja tem na mao, e ele tem o papel para mostrar. */
.destaque {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line-3);
  border-left: 4px solid var(--green);
  border-radius: var(--r-hard);
  padding: clamp(22px, 2.4vw, 34px);
  margin-bottom: 34px;
}
.destaque__papel {
  display: block;
  width: 250px;
  text-decoration: none;
  transition: transform .15s;
}
.destaque__papel:hover,
.destaque__papel:focus-visible { transform: translateY(-3px); }
.destaque__capa { display: block; }
.destaque__capa img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-4);
  box-shadow: 0 12px 30px rgba(16, 35, 60, .16);
  background: #fff;
}
.destaque__rotulo {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.destaque__titulo {
  font-size: var(--t-21);
  line-height: 1.45;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  max-width: 42ch;
}
.destaque__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1;
  color: var(--green-deep);
  margin: 18px 0 0;
  letter-spacing: -.01em;
}
.destaque__legenda {
  font-size: var(--t-17);
  line-height: 1.5;
  color: var(--ink-mute-2);
  margin: 8px 0 0;
  max-width: 40ch;
}
.destaque__claim {
  font-size: var(--t-19);
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
  margin: 18px 0 0;
}
.destaque__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
/* a segunda acao leva para fora do site, para o orgao que autentica.
   Fica em navy para nao competir com o "abrir o oficio", que e a que
   99% das pessoas vao clicar */
.prova__link--sec {
  border-color: var(--line-6);
  color: var(--ink-muted);
}
.prova__link--sec:hover,
.prova__link--sec:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.provas {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-5);
}
.prova {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
}
.prova--bloqueada { opacity: .62; }
/* a linha que o documento em destaque ja prova: sem etiqueta, entao
   sem segunda coluna, senao sobra um vao a direita do titulo */
.prova--provada { grid-template-columns: 1fr; }
.prova__title {
  font-size: var(--t-19);
  line-height: 1.4;
  color: var(--navy);
  font-weight: 600;
}
.prova__detail {
  font-size: 15.5px;
  color: var(--ink-mute-2);
  margin-top: 6px;
}
.prova__flag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--alert);
  margin-top: 6px;
}
/* etiqueta de documento. No mockup o hover estava declarado num
   atributo que o runtime nunca leu, entao nunca funcionou.
   Aqui ele existe de verdade. */
.prova__link {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  padding: 8px 12px;
  border: 1px solid var(--green-deep);
  text-decoration: none;
  color: var(--green-deep);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.prova__link:hover,
.prova__link:focus-visible {
  background: var(--green-deep);
  color: #fff;
}
.prova__link--off {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  padding: 8px 12px;
  border: 1px dashed var(--line-7);
  color: var(--ink-mute-2);
  white-space: nowrap;
}
.confira__nota {
  font-size: var(--t-17);
  color: var(--ink-mute-2);
  margin: 22px 0 44px;
}

.cta-band {
  background: var(--navy);
  padding: 38px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-cta);
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.btn-yellow {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: var(--t-17);
  padding: 17px 30px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-hard);
  transition: background .15s;
}
.btn-yellow:hover,
.btn-yellow:focus-visible { background: var(--yellow-hover); color: var(--navy); }

/* ---------- BLOCO 7 | NINGUEM VAI EMBORA POR PAISAGEM ---------- */

.paisagem { background: var(--bg-alt); padding: var(--pad-sec) var(--gutter); }
.paisagem__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1;
  margin: 0 0 26px;
  color: var(--navy);
  max-width: 22ch;
}
.paisagem__p1 {
  font-size: var(--t-21);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--ink-body);
}
.paisagem__p2 {
  font-size: var(--t-18);
  line-height: 1.55;
  margin: 0 0 48px;
  max-width: 62ch;
  color: var(--ink-mute-2);
}
.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  color: var(--ink-faint);
  margin-bottom: 20px;
}
/* grade de fio de cabelo: o gap de 2px sobre o fundo escuro
   e o que desenha as linhas entre as celulas */
.cargos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line-3);
  /* virou <ul> por semântica: sem este reset, o padding padrão da
     lista desloca a grade em 40px e ela deixa de bater com o design */
  list-style: none;
  margin: 0;
  padding: 0;
}
.cargo {
  background: var(--surface);
  padding: 30px 26px;
  min-height: 184px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cargo__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-cargo);
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}
.cargo__text { font-size: var(--t-165); line-height: 1.5; color: var(--ink-body); }
.cargo__claim {
  margin-top: auto;
  font-size: var(--t-165);
  font-weight: 600;
  color: var(--navy);
}
.cargo--navy { background: var(--navy); }
.cargo--navy .cargo__title { color: var(--yellow); }
.cargo--navy .cargo__text { color: var(--on-navy-72); }
.cargo--navy .cargo__claim { color: #fff; }

/* ---------- BLOCO 9 | OUCA QUEM ME CONHECE ---------- */

.depoimentos { background: var(--bg); padding: var(--pad-sec-m) var(--gutter); }
.depoimentos .head2 { margin-bottom: 40px; }

.depo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card-2);
  overflow: hidden;
}
/* placeholder listrado enquanto os videos nao existem */
.depo__slot {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(45deg,
              #e2dfd7 0 6px, #eeebe4 6px 12px);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

/* Fachada de vídeo: só a capa e o botão de play. O player do YouTube
   entra depois do clique, por app.js. */
.depo__slot--video {
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.depo__slot--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(6, 14, 26, 0) 40%, rgba(6, 14, 26, .45) 100%);
  transition: background .2s;
}
.depo__play {
  position: relative;
  z-index: 1;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  transition: transform .18s, background .18s;
}
.depo__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 20px solid var(--navy);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.depo__slot--video:hover .depo__play,
.depo__slot--video:focus-visible .depo__play {
  transform: scale(1.08);
  background: var(--yellow);
}
.depo__slot--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.depo__slot span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.depo__meta { padding: 20px 22px 24px; }
.depo__name {
  font-size: var(--t-18);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.depo__role {
  font-size: 14.5px;
  color: var(--ink-mute-2);
  margin: 4px 0 0;
}

/* ---------- BLOCO 11 | O CONVITE ---------- */

.convite { background: var(--bg); padding: 40px var(--gutter-xs); }
.convite__slab { padding: var(--pad-sec-m) 40px calc(var(--pad-sec-m) + 4px); }
.convite__glow-y {
  width: 820px; height: 820px;
  top: -380px; right: -240px;
  background: radial-gradient(circle at 45% 60%,
              rgba(245, 179, 36, .28), rgba(245, 179, 36, 0) 70%);
  filter: blur(20px);
}
.convite__glow-g {
  width: 700px; height: 700px;
  bottom: -400px; left: -180px;
  background: radial-gradient(circle at 50% 45%,
              rgba(14, 138, 79, .32), rgba(14, 138, 79, 0) 70%);
  filter: blur(18px);
}
.convite__ring { width: 1000px; height: 1000px; top: -160px; left: 34%; }
.convite__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: stretch;
}
.convite__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}
.convite__callback {
  font-size: var(--t-20);
  line-height: 1.5;
  margin: 0 0 14px;
  color: var(--on-navy-60);
}
.convite__punch {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-por-ela);
  line-height: .95;
  margin: 0 0 22px;
  color: var(--yellow);
}
.convite__claim {
  font-size: var(--t-24);
  line-height: 1.4;
  margin: 0;
  font-weight: 600;
  max-width: 24ch;
}
.convite__nota {
  border-radius: var(--r-card-2);
  padding: 26px 28px;
}
.convite__nota p {
  font-size: var(--t-18);
  line-height: 1.6;
  margin: 0;
  color: var(--on-navy-78);
}

/* --- formulario --- */
.form-card {
  background: var(--surface-form);
  border-radius: var(--r-card);
  padding: 38px 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
  color: var(--navy);
}
.form-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-form-tt);
  line-height: 1.08;
  color: var(--navy);
  margin: 0 0 4px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input {
  font-family: var(--font-body);
  font-size: 16.5px;
  padding: 15px 18px;
  border: 1px solid var(--line-4);
  border-radius: var(--r-input);
  color: var(--navy);
  background: #fbfaf8;
  width: 100%;
  outline: none;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--ink-faint); opacity: 1; }
.field input:hover { border-color: var(--line-6); }
.field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 138, 79, .16);
}
.field input:user-invalid {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(161, 52, 31, .12);
}
.field--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Região de erro do formulário. Fica sempre no DOM por causa do
   aria-live, mas com margem zero não ocupa altura enquanto vazia. */
.field__error {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--alert);
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}
.field__error:empty { display: none; }

.form-legend {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
  padding: 0;
  border: 0;
  /* legend encolhe para o conteúdo por padrão; no mockup era um div
     de largura total */
  display: block;
  width: 100%;
}
.chips-wrap { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
/* o chip e um <label> ligado a um checkbox real: acessivel por
   teclado e por leitor de tela, sem depender de JS */
.chip { position: relative; display: inline-flex; flex: none; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1.2;
  border: 1px solid var(--line-6);
  background: var(--surface);
  color: var(--navy);
}
.chip input:checked + span {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.chip input:focus-visible + span {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.chip:hover input:not(:checked) + span { border-color: var(--green); }

.btn-submit {
  margin-top: 14px;
  background: var(--green);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18.5px;
  padding: 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s;
}
.btn-submit:hover,
.btn-submit:focus-visible { background: var(--green-darker); }
.btn-submit[aria-busy="true"] { opacity: .7; cursor: progress; }

.form-lgpd {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
  margin: 0;
}
.form-lgpd a { color: var(--green-deep); }

/* honeypot anti-spam, invisivel para gente */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --- estado de recebido --- */
.recebido {
  background: var(--surface-form);
  color: var(--navy);
  border-radius: var(--r-card);
  padding: 40px 38px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recebido .eyebrow { margin-bottom: 22px; }
.recebido__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-card-tt);
  line-height: 1.06;
  margin: 0 0 26px;
  max-width: 22ch;
}
.recebido__row {
  border-top: 1px solid var(--line-2);
  padding: 18px 0;
}
.recebido__label {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.recebido__value {
  font-size: var(--t-21);
  font-weight: 600;
  margin-top: 5px;
}
.recebido__fallback {
  font-size: var(--t-18);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
}
/* Volta para a conversa do WhatsApp. Deliberadamente mais discreto que
   o .btn-submit: aqui a pessoa ja fez o que a pagina pedia, e o botao e
   um caminho de volta, nao uma segunda cobranca. Vira o caminho
   principal so quando o pop-up foi barrado, e ai quem avisa e o texto. */
.btn-whats {
  display: inline-block;
  margin-top: 22px;
  align-self: flex-start;
  background: transparent;
  color: var(--green-deep);
  border: 1px solid var(--green-deep);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-17);
  padding: 13px 24px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-whats:hover,
.btn-whats:focus-visible {
  background: var(--green-deep);
  color: #fff;
}
[hidden] { display: none !important; }

/* ---------- BLOCO 12 | QUEM E, EM FATOS ---------- */

.fatos {
  background: var(--bg);
  padding: var(--pad-sec-m) var(--gutter) 40px;
}
.fatos__grid {
  display: grid;
  /* a coluna do santinho é travada em 420px, que é a largura em que ele
     foi desenhado. Sem isso ele cresceria junto com a coluna nova. */
  grid-template-columns: 1fr minmax(0, 420px);
  gap: clamp(32px, 3.9vw, 56px);
  align-items: start;
}
.fatos__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: center;
}
.fatos__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.04;
  margin: 0;
  color: var(--navy);
  max-width: 20ch;
}
.fatos__p {
  font-size: var(--t-21);
  line-height: 1.6;
  margin: 0;
  color: var(--ink-body);
  max-width: 48ch;
}
.fatos__claim {
  font-size: var(--t-23);
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
  color: var(--green-deep);
  max-width: 34ch;
}
.fatos__santinho {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-3);
}
.fatos__foot {
  max-width: none;
  margin: 56px auto 0;
  border-top: 1px solid var(--line-3);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- RODAPE LEGAL ---------- */

.rodape {
  background: var(--navy);
  color: var(--on-navy-72);
  padding: 44px var(--gutter);
  font-size: 13.5px;
  line-height: 1.6;
}
.rodape__inner {
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.rodape a { color: var(--yellow); }
.rodape a:hover { color: var(--yellow-hover); }
.rodape__legal { max-width: 60ch; margin: 0; }
/* o unico link do rodape sobre fundo escuro: sublinhado, porque cor
   sozinha nao e sinal de link para quem nao distingue cor */
.rodape__whats {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.rodape__whats:hover,
.rodape__whats:focus-visible { color: var(--yellow); }
.rodape__pend {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-navy-50);
  margin: 12px 0 0;
}

/* ============================================================
   RESPONSIVO
   Aditivo: a regua de 1440px acima permanece intacta.
   ============================================================ */

/* ---- ate 1200px: alivia os paddings internos dos blocos escuros ---- */
@media (max-width: 1200px) {
  .hero { --logo-larg: 150px; --logo-topo: 32px; --logo-folga: 40px; }
  .hero__text { padding-right: 32px; padding-bottom: 72px; }
  .fiquei__slab, .convite__slab { padding-left: 32px; padding-right: 32px; }
  .deles__card { padding: 30px 30px; }
  .fiquei__card { padding: 32px 32px; }
  .form-card { padding: 32px 30px 28px; }
  .recebido { padding: 34px 30px; }
  .cta-band { padding: 32px 30px; }
}

/* ---- ate 1000px: hero empilha, grades de 3 viram 2 ---- */
@media (max-width: 1000px) {
  .hero { padding: 12px 12px 0; }
  .hero__slab {
    border-radius: 36px 36px 46% 46% / 36px 36px 90px 90px;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__text {
    padding-right: 32px;
    padding-bottom: 40px;
    padding-left: 32px;
    order: 1;
    align-self: start;
  }
  .hero__title { max-width: 20ch; }
  .hero__sub, .hero__claim { max-width: 46ch; }
  .hero__figure {
    order: 2;
    min-height: 0;
    height: auto;
    padding-bottom: 40px;
  }
  .hero__photo {
    height: auto;
    width: auto;
    max-height: 520px;
    max-width: 78%;
  }
  .hero__ground { bottom: 34px; height: 48px; }

  .grid3, .cargos { grid-template-columns: repeat(2, 1fr); }
  .cargo { min-height: 0; }

  .fatos__grid { grid-template-columns: 1fr .8fr; }
}

/* ---- ate 860px: tudo vira coluna unica ---- */
@media (max-width: 860px) {
  .cadeira__grid,
  .deles__grid,
  .ultimato__grid,
  .fiquei__grid,
  .convite__grid,
  .head2,
  .fatos__grid {
    grid-template-columns: 1fr;
  }
  .head2 { align-items: start; }
  .head2__title, .head2__intro { max-width: 34ch; }

  /* o documento em destaque empilha, e o papel encolhe: em uma coluna
     so ele estaria disputando a tela com o proprio numero */
  .destaque { grid-template-columns: 1fr; }
  /* so o papel encolhe. Se o justify-self fosse no container, a coluna
     de texto encolheria junto e o numero grande quebraria em duas linhas */
  .destaque__papel { width: 160px; justify-self: start; }

  /* a barra vertical do "220 mil" vira uma regra horizontal,
     que e o equivalente honesto em uma coluna so */
  .stat {
    border-left: 0;
    border-top: 2px solid var(--navy);
    padding-left: 0;
    padding-top: 26px;
  }
  .stat__legend, .stat__claim { max-width: 46ch; }

  .deles__title, .deles__p, .deles__claim,
  .ultimato__cena, .paisagem__title,
  .fatos__title, .fatos__p, .fatos__claim { max-width: 34ch; }
  .paisagem__p1, .paisagem__p2 { max-width: none; }

  .fiquei__setup, .fiquei__punch { max-width: 22ch; }
  .fiquei__col { gap: 28px; }
  .convite__col { gap: 28px; }
  .convite__claim { max-width: 34ch; }

  /* o santinho nao precisa ocupar a largura toda do celular */
  .fatos__santinho { max-width: 420px; }
  .fatos__grid > div:last-child { justify-self: start; }

  .cta-band {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .btn-yellow {
    justify-self: start;
    display: inline-block;
    text-align: center;
  }

  .confira__head { gap: 10px; }
  .confira__intro { max-width: none; }
}

/* ---- ate 640px: celular ---- */
@media (max-width: 640px) {
  .hero { --logo-larg: 126px; --logo-topo: 22px; --logo-folga: 34px; }
  .hero__logo { left: 22px; }
  .hero__text { padding-right: 22px; padding-bottom: 32px; padding-left: 22px; }
  .hero__text .eyebrow { margin-bottom: 24px; }
  .hero__photo { max-width: 92%; max-height: 440px; }

  .grid3, .cargos, .papeis__lista { grid-template-columns: 1fr; }
  .cargos { gap: 1px; }

  /* o papel encolhe mas continua ao lado do texto: empilhar deixaria
     dois cartoes altissimos no meio do bloco 2 */
  .papel__capa { width: 96px; }
  .papel__link { gap: 16px; padding: 14px 16px 14px 14px; }

  .fiquei { padding: 24px 12px; }
  .convite { padding: 24px 12px; }
  .fiquei__slab, .convite__slab {
    border-radius: 32px;
    padding: 48px 22px 52px;
  }
  .deles__card, .fiquei__card { padding: 26px 22px; }
  .form-card { padding: 26px 22px 24px; }
  .recebido { padding: 28px 22px; }
  .cta-band { padding: 28px 22px; }
  .ultimato__media { height: 220px; }

  /* documento e etiqueta em linhas separadas, senao a etiqueta
     espreme o titulo da prova */
  .prova {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  .prova__link, .prova__link--off {
    justify-self: start;
    display: inline-block;
  }

  .fatos__foot { flex-direction: column; }
  .rodape__inner { flex-direction: column; }
}

/* ---- ate 460px: cidade e WhatsApp lado a lado ficam apertados ---- */
@media (max-width: 460px) {
  .field--pair { grid-template-columns: 1fr; }
}

/* ---- ate 380px: telas pequenas ---- */
@media (max-width: 380px) {
  .hero { --logo-larg: 112px; --logo-topo: 18px; --logo-folga: 30px; }
  .hero__logo { left: 18px; }
  .hero__text { padding-right: 18px; padding-bottom: 28px; padding-left: 18px; }
  .chip span { font-size: 13.5px; padding: 9px 13px; }
}

/* ---- respeitar reducao de movimento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- impressao ---- */
@media print {
  .slab, .cargo--navy, .cta-band, .rodape { background: #fff !important; color: #000 !important; }
  .hero__photo, .depo__slot, .glow, .ring { display: none; }
}

/* ============================================================
   MOVIMENTO
   Só entra quando o JavaScript confirma que o sistema não pediu
   menos movimento. Sem isso, a página aparece pronta, que é o
   comportamento correto e também o de quem está sem JS.
   ============================================================ */

/* O estado escondido entra SEM transicao. Se a transicao valesse ja
   na entrada, o elemento faria um fade para sumir antes de reaparecer,
   que e exatamente o defeito que se quer evitar. O JavaScript esconde
   primeiro, forca o recalculo e so entao liga a transicao. */
.com-movimento .entra {
  opacity: 0;
  transform: translateY(14px);
}
.com-movimento .entra.animavel {
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.com-movimento .entra.entrou {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* O número não pode pular de largura enquanto conta, senão a coluna
   inteira treme. tabular-nums trava o avanço de cada dígito. */
.stat__num { font-variant-numeric: tabular-nums; }

/* Deriva dos halos dos blocos escuros. Anima só o transform, nunca o
   blur, porque animar blur repinta a cada frame e custa caro. */
@keyframes deriva-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes deriva-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -1.5%, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.com-movimento .hero__glow-green,
.com-movimento .fiquei__glow,
.com-movimento .convite__glow-y {
  animation: deriva-a 42s ease-in-out infinite;
}
.com-movimento .hero__glow-yellow,
.com-movimento .convite__glow-g {
  animation: deriva-b 52s ease-in-out infinite;
}

/* ---------- micro-interações do formulário ---------- */

/* marca de selecionado no chip, com espaço reservado desde o início
   para o chip não mudar de largura ao ser marcado */
.chip span::before {
  content: "";
  display: inline-block;
  width: 0;
  margin-right: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .16s, margin-right .16s;
  vertical-align: -1px;
}
.chip input:checked + span::before {
  content: "✓";
  width: 1em;
  margin-right: 6px;
}
.chip input:checked + span { font-weight: 600; }

/* botão de envio enquanto envia */
.btn-submit[aria-busy="true"] {
  opacity: 1;
  cursor: progress;
  background: var(--green-darker);
}
.btn-submit[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girando .7s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }

/* ============================================================
   CTA FIXO NO CELULAR
   No celular a página tem mais de 13 mil pixels e o formulário
   fica no fim. Esta barra dá um caminho curto de volta.
   ============================================================ */

.cta-fixo { display: none; }

@media (max-width: 860px) {
  .cta-fixo {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(16, 35, 60, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--navy-line);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }
  .cta-fixo.visivel { transform: none; }

  .cta-fixo a {
    display: block;
    background: var(--yellow);
    color: var(--navy);
    font-weight: 700;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: var(--r-hard);
  }
  .cta-fixo a:hover, .cta-fixo a:focus-visible {
    background: var(--yellow-hover);
    color: var(--navy);
  }

  /* espaço no fim da página para a barra não cobrir o rodapé */
  .rodape { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-fixo { transition: none; }
}

/* alvos de parallax: avisa o navegador para preparar a camada */
.hero__photo, .hero__ground, .ring, .fatos__santinho { will-change: transform; }