/* FniC 27 · página de espera
   Cores tiradas da arte oficial (capa do site).
   Linguagem: cartaz de feira/indústria. Cantos retos, chanfro nos botões, filetes no lugar de caixas. */
:root {
  --azul: #0d2e73;          /* fundo da arte */
  --azul-escuro: #081f52;
  --azul-medio: #1446a8;
  --amarelo: #ffcc00;
  --ciano: #17bbee;
  --ciano-claro: #a9e3f7;
  --branco: #ffffff;
  --texto-suave: #c9d6f2;
  --linha: rgba(255,255,255,.2);
  --tinta: #0b1f4d;         /* texto sobre fundo claro */
  --cinza: #4f5f80;
  --borda: #b9c5dd;
  --erro: #c62f3b;
  --vermelho: #bd0c0c;

  --f-texto: "Albert Sans", system-ui, sans-serif;   /* no lugar da Proxima Nova */
  --f-arista: "Fredoka", "Albert Sans", sans-serif;  /* no lugar da Arista 2.0 (datas, horários, selo) */

  --gutter: clamp(16px, 4vw, 48px);
  --chanfro: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

/* Títulos largos, como a capa */

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--amarelo); color: var(--tinta); padding: 10px 16px;
  font-weight: 700; text-decoration: none;
}
.pular:focus { top: 16px; }

/* Rótulo pequeno em caixa alta */
.rotulo, .hero__edicao, .sobretitulo, .contagem__rotulo, .rodape__realizacao > p {
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}

/* ---------- Topo ---------- */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: auto; height: 150px; }
.topo__insta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 8px 12px; border: 1px solid var(--linha);
  transition: background .2s, border-color .2s;
}
.topo__insta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
.topo__insta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.topo__insta .cheio { fill: currentColor; stroke: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 196px var(--gutter) 56px;
  overflow: hidden;
}
.hero__fundo { position: absolute; inset: 0; z-index: -1; }
.hero__publico {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: min(1100px, 100%); height: 100%; object-fit: cover;
  opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 30%, transparent 75%);
}
.hero__deco {
  position: absolute; top: 0; height: 100%; width: auto; max-width: 26vw; object-fit: cover;
  mix-blend-mode: lighten; /* o fundo azul da arte some sobre a foto */
}
.hero__deco--esq {
  left: 0; object-position: left center;
  -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent);
          mask-image: linear-gradient(90deg, #000 75%, transparent);
}
.hero__deco--dir {
  right: 0; object-position: right center;
  -webkit-mask-image: linear-gradient(270deg, #000 80%, transparent);
          mask-image: linear-gradient(270deg, #000 80%, transparent);
}

.hero__conteudo {
  width: 100%; max-width: 980px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__edicao {
  font-size: clamp(12px, 1.3vw, 14px); color: var(--ciano-claro);
  margin-bottom: clamp(16px, 2.6vw, 28px);
  display: flex; align-items: center; gap: 14px;
}
.hero__edicao::before, .hero__edicao::after { content: ""; width: 32px; height: 2px; background: var(--amarelo); }

/* Título "Novas CONEXÕES, novos negócios!" */
.titulo { display: grid; justify-items: center; line-height: .95; }
.titulo__novas, .titulo__negocios {
  font-weight: 800; font-size: clamp(24px, 3.8vw, 48px); text-transform: uppercase;
  letter-spacing: -.01em;
}
.titulo__novas { justify-self: start; margin-left: 10%; margin-bottom: .05em; }
.titulo__negocios { justify-self: end; margin-right: 10%; margin-top: .12em; }
.titulo__palavra {
  display: inline-flex; align-items: center;
  font-weight: 900; font-size: clamp(50px, 13vw, 150px); letter-spacing: -.03em;
  text-transform: uppercase;
}
.titulo__palavra span {
  /* degradê branco → azul claro com riscas, como na arte */
  background:
    repeating-linear-gradient(180deg, rgba(13,46,115,0) 0 3px, rgba(13,46,115,.12) 3px 4px),
    linear-gradient(180deg, #ffffff 15%, #cfeefc 55%, #6ec9ef 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(4, 18, 60, .45));
}
.titulo__x {
  width: .9em; height: .9em; margin: 0 .01em;
  filter: drop-shadow(0 6px 18px rgba(4, 18, 60, .5));
  animation: girar-x 9s ease-in-out infinite;
}
@keyframes girar-x {
  0%, 70%, 100% { transform: rotate(0); }
  80% { transform: rotate(90deg) scale(1.06); }
  90% { transform: rotate(90deg); }
}

/* Data e local */
.quando {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 32px);
  margin-top: clamp(24px, 3.8vw, 42px);
}
.quando__data { display: flex; align-items: center; gap: 6px; line-height: .85; font-family: var(--f-arista); }
.quando__dia { font-weight: 300; font-size: clamp(60px, 7.6vw, 92px); letter-spacing: -.02em; }
.quando__dia--a { color: var(--amarelo); }
.quando__dia--b { color: var(--ciano); }
.quando__a { font-weight: 300; font-size: clamp(20px, 2.4vw, 28px); align-self: flex-end; padding-bottom: .35em; }
.quando__mes {
  display: flex; flex-direction: column; margin-left: 8px;
  font-weight: 600; font-size: clamp(32px, 3.8vw, 46px); text-align: left;
}
.quando__mes small { font-weight: 300; font-size: .58em; margin-top: 4px; }
.quando__info {
  text-align: left; font-size: 15px; line-height: 1.45; color: var(--texto-suave);
  padding-left: clamp(16px, 3vw, 32px); border-left: 2px solid var(--amarelo);
}
.quando__hora { font-family: var(--f-arista); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); color: var(--branco); margin-bottom: 4px; }

/* Botões principais: credenciais de feira (crachá com furo + canhoto picotado) */
.acoes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
  width: 100%; max-width: 800px; margin-top: clamp(30px, 4vw, 46px);
  perspective: 900px;
}
.cta {
  --cor: var(--amarelo);
  --canhoto: 86px;
  position: relative; display: grid; grid-template-columns: 1fr var(--canhoto);
  min-height: 128px;
  text-decoration: none; text-align: left; color: var(--tinta);
  background: var(--cor);
  /* recortes meia-lua no picote, em cima e embaixo */
  -webkit-mask:
    radial-gradient(circle 11px at calc(100% - var(--canhoto)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at calc(100% - var(--canhoto)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle 11px at calc(100% - var(--canhoto)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at calc(100% - var(--canhoto)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  transform-origin: 50% -40px;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), filter .25s;
  overflow: hidden;
}
.cta--patrocinador { --cor: var(--ciano); }
/* brilho que passa de tempos em tempos */
.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: brilho 6s ease-in-out 2.4s infinite;
}
.cta--patrocinador::after { animation-delay: 3.4s; }
@keyframes brilho { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
.cta:hover { transform: translateY(-4px) rotate(-1.2deg); filter: brightness(1.04); }
.cta--patrocinador:hover { transform: translateY(-4px) rotate(1.2deg); }

.cta__furo {
  position: absolute; top: 14px; left: 22px; width: 34px; height: 8px; border-radius: 4px;
  background: var(--azul); box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
}
.cta__corpo { display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 18px 18px 22px; }
.cta__pre { font-family: var(--f-arista); font-weight: 500; font-size: 15px; line-height: 1; }
.cta__rotulo { font-weight: 900; font-size: clamp(26px, 2.8vw, 34px); line-height: 1; text-transform: uppercase; letter-spacing: -.025em; margin-top: 4px; }
.cta__sub { font-size: 14px; font-weight: 600; margin-top: 8px; padding-top: 8px; border-top: 1.5px solid rgba(11,31,77,.25); }
.cta__canhoto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-left: 2px dashed rgba(11,31,77,.4);
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.cta:hover .cta__canhoto { transform: translateX(6px) rotate(4deg); }
.cta__seta {
  width: 34px; height: 34px; stroke: var(--tinta); fill: none; stroke-width: 2.6; stroke-linecap: square;
  animation: seta 1.8s ease-in-out infinite;
}
@keyframes seta { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
/* "código de barras" do canhoto */
.cta__codigo {
  width: 46px; height: 22px;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 8px, var(--tinta) 8px 11px, transparent 11px 13px);
  opacity: .75;
}

/* Contagem: números separados por filetes */
.contagem { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.contagem__rotulo { font-size: 12px; color: var(--texto-suave); }
.contagem__lista { display: flex; list-style: none; padding: 0; }
.contagem__lista li { display: flex; align-items: baseline; gap: 5px; padding: 0 16px; border-left: 1px solid var(--linha); }
.contagem__lista li:first-child { border-left: 0; padding-left: 0; }
.contagem__lista strong { font-family: var(--f-arista); font-weight: 500; font-size: 26px; font-variant-numeric: tabular-nums; }
.contagem__lista span { font-size: 13px; color: var(--texto-suave); }

/* Selo "Entrada gratuita" */
.selo {
  position: absolute; top: clamp(90px, 13vh, 130px); right: clamp(150px, 17vw, 300px);
  width: 150px; aspect-ratio: 1; display: grid; place-items: center;
}
.selo__anel { position: absolute; inset: 0; width: 100%; height: 100%; animation: rodar 40s linear infinite; }
.selo__texto {
  font-family: var(--f-arista); font-weight: 600; font-size: 19px; line-height: 1.05; text-transform: uppercase;
  text-align: center; rotate: -14deg;
}
@keyframes rodar { to { transform: rotate(360deg); } }

/* ---------- Faixa do lançamento ---------- */
.lancamento { background: var(--amarelo); color: var(--tinta); }
.lancamento__inner {
  max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.lancamento p { display: flex; flex-direction: column; font-size: 15px; }
.lancamento strong { font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: -.005em; }
.lancamento a {
  flex: none; padding: 12px 18px; background: var(--tinta); color: var(--branco);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.lancamento a::after { content: " →"; }
.lancamento a:hover { background: var(--azul-medio); }

/* ---------- Participe ---------- */
.participe {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start;
}
.participe__texto { position: sticky; top: 32px; }
.sobretitulo { font-size: 13px; color: var(--amarelo); margin-bottom: 14px; }
.participe h2 {
  font-weight: 800; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.05;
  letter-spacing: -.02em; margin-bottom: 22px; text-wrap: balance;
}
.participe__texto > p:not(.sobretitulo) { color: var(--texto-suave); margin-bottom: 14px; max-width: 52ch; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.numeros div { padding-top: 14px; border-top: 3px solid var(--amarelo); }
.numeros div:nth-child(2) { border-color: var(--ciano); }
.numeros div:nth-child(3) { border-color: var(--branco); }
.numeros dt { font-family: var(--f-arista); font-weight: 600; font-size: clamp(22px, 2.3vw, 30px); white-space: nowrap; line-height: 1.05; letter-spacing: -.02em; }
.numeros dd { font-size: 14px; color: var(--texto-suave); margin-top: 6px; line-height: 1.35; }

/* WhatsApp da organização */
.whats { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linha); }
.whats p { font-size: 15px; color: var(--texto-suave); margin-bottom: 12px; }
.whats__botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.whats__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 12px; text-decoration: none;
  background: #25d366; color: #06301a; font-size: 15px;
  transition: background .2s;
}
.whats__btn:hover { background: #3ee07a; }
.whats__btn strong { font-weight: 800; margin-right: 4px; }
.whats__btn svg { width: 22px; height: 22px; flex: none; }
.whats__btn .contorno { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.whats__btn .cheio { fill: currentColor; }

/* Cartão do formulário */
.cartao {
  background: var(--branco); color: var(--tinta);
  padding: clamp(20px, 3vw, 34px);
  border-top: 6px solid var(--amarelo);
  scroll-margin-top: 24px;
}
.cartao:has(.form[data-tipo="patrocinador"]) { border-top-color: var(--ciano); }
.abas { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; border: 1.5px solid var(--tinta); }
.abas button {
  font: inherit; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .02em;
  padding: 13px 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--tinta);
  transition: background .2s, color .2s;
}
.abas button + button { border-left: 1.5px solid var(--tinta); }
.abas button[aria-selected="true"] { background: var(--tinta); color: var(--branco); }
.abas button[aria-selected="false"]:hover { background: #eef2fa; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.form > * { grid-column: 1 / -1; }
.form .campo--meio { grid-column: auto; }
.form__intro { font-weight: 600; font-size: 16px; margin-top: -4px; }
.form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--cinza); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 16px; color: var(--tinta);
  padding: 12px 14px; border: 1.5px solid var(--borda); border-radius: 0; background: #f7f9fd;
  width: 100%; min-width: 0;
  transition: border-color .2s, background .2s;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--tinta); background-color: var(--branco); box-shadow: inset 0 -3px 0 var(--amarelo);
}
.campo [aria-invalid="true"] { border-color: var(--erro); }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--cinza); cursor: pointer; }
.aceite input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--tinta); }
.aceite.erro span { color: var(--erro); }
.enviar {
  font: inherit; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .02em;
  padding: 18px 20px; border: 0; cursor: pointer;
  background: var(--amarelo); color: var(--tinta);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: filter .2s;
}
.form[data-tipo="patrocinador"] .enviar { background: var(--ciano); }
.enviar:hover { filter: brightness(1.05); }
.enviar[disabled] { opacity: .6; cursor: progress; }
.form__status { font-size: 14px; min-height: 1em; }
.form__status.erro { color: var(--erro); font-weight: 600; }

.sucesso { padding: 12px 0; display: grid; gap: 14px; }
.sucesso img { width: 56px; height: 56px; }
.sucesso h3 { font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.sucesso p { color: var(--cinza); max-width: 44ch; }
.sucesso__whats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sucesso__whats a {
  padding: 12px 18px; background: #25d366; color: #06301a;
  font-weight: 700; text-decoration: none;
}
.sucesso__insta { font-weight: 600; color: var(--azul-medio); }
.sucesso__voltar { justify-self: start; font: inherit; font-size: 14px; background: none; border: 0; padding: 0; color: var(--cinza); text-decoration: underline; cursor: pointer; }

/* ---------- Rodapé ---------- */
.rodape {
  border-top: 1px solid var(--linha); background: var(--azul-escuro);
  padding: 40px var(--gutter) 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
}
.rodape__logo { width: 150px; height: auto; }
.rodape__realizacao > p { font-size: 11px; color: var(--texto-suave); margin-bottom: 12px; }
.rodape__logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rodape__logos img { width: 220px; height: auto; }
.rodape__logos img.rodape__prefeitura { width: 240px; height: auto; padding-left: 28px; border-left: 1px solid var(--linha); box-sizing: content-box; }
.rodape__info { font-size: 14px; color: var(--texto-suave); text-align: right; }
.rodape__info strong { color: var(--branco); }
.rodape__info a { color: var(--ciano-claro); }
.rodape__credito {
  width: 100%; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px; color: var(--texto-suave); text-align: center;
}
.rodape__credito a { color: var(--branco); }

/* Topo posicionado sobre o hero */
.pagina { position: relative; }

/* ---------- Animações ---------- */
/* Entrada do topo em sequência. "backwards" para não brigar com o :hover depois. */
.marca img { animation: logo-entra 1s cubic-bezier(.3,1.4,.5,1) .1s backwards; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.marca:hover img { transform: rotate(-4deg) scale(1.04); }
@keyframes logo-entra { from { opacity: 0; transform: translateY(-24px) scale(.8) rotate(-8deg); } }
.topo__insta { animation: sobe .7s ease-out .3s backwards; }

.hero__publico { animation: publico 2.4s ease-out backwards; }
@keyframes publico { from { opacity: 0; transform: scale(1.12); } }
.hero__deco--esq { animation: deco-esq 1.4s cubic-bezier(.2,.8,.2,1) .15s backwards, flutua 8s ease-in-out 1.6s infinite; }
.hero__deco--dir { animation: deco-dir 1.4s cubic-bezier(.2,.8,.2,1) .15s backwards, flutua 9s ease-in-out 2s infinite reverse; }
@keyframes deco-esq { from { opacity: 0; transform: translateX(-70%); } }
@keyframes deco-dir { from { opacity: 0; transform: translateX(70%); } }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.hero__edicao { animation: sobe .7s ease-out .35s backwards; }
.hero__edicao::before, .hero__edicao::after { animation: risco .8s ease-out .6s backwards; }
@keyframes risco { from { transform: scaleX(0); } }
.titulo__novas { animation: da-esquerda .8s cubic-bezier(.2,.8,.2,1) .45s backwards; }
.titulo__negocios { animation: da-direita .8s cubic-bezier(.2,.8,.2,1) .85s backwards; }
@keyframes da-esquerda { from { opacity: 0; transform: translateX(-60px); } }
@keyframes da-direita { from { opacity: 0; transform: translateX(60px); } }

/* CONEXÕES sobe por trás de uma máscara e ganha um reflexo que passa */
.titulo__palavra span {
  background:
    linear-gradient(100deg, transparent 44%, rgba(255,255,255,.95) 50%, transparent 56%),
    repeating-linear-gradient(180deg, rgba(13,46,115,0) 0 3px, rgba(13,46,115,.12) 3px 4px),
    linear-gradient(180deg, #ffffff 15%, #cfeefc 55%, #6ec9ef 100%);
  background-size: 300% 100%, auto, auto;
  background-position: 120% 0, 0 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: palavra-sobe .9s cubic-bezier(.2,.8,.2,1) .55s backwards, reflexo 7s ease-in-out 2.6s infinite;
  /* folga em cima para o til do Õ: o degradê só pinta dentro da caixa da palavra */
  padding-top: .22em; margin-top: -.22em;
}
.titulo__palavra span + img + span { animation-delay: .7s, 2.9s; }
@keyframes palavra-sobe { from { clip-path: inset(0 0 100% 0); transform: translateY(45%); } to { clip-path: inset(-10% 0 -20% 0); } }
@keyframes reflexo { 0% { background-position: 120% 0, 0 0, 0 0; } 25%, 100% { background-position: -20% 0, 0 0, 0 0; } }
.titulo__x { animation: x-entra 1s cubic-bezier(.3,1.5,.5,1) .65s backwards, girar-x 9s ease-in-out 3s infinite; }
@keyframes x-entra { from { opacity: 0; transform: scale(0) rotate(-200deg); } }

.quando__dia--a { animation: da-esquerda .7s cubic-bezier(.2,.8,.2,1) 1s backwards; }
.quando__a { animation: sobe .6s ease-out 1.1s backwards; }
.quando__dia--b { animation: da-direita .7s cubic-bezier(.2,.8,.2,1) 1.05s backwards; }
.quando__mes, .quando__info { animation: sobe .7s ease-out 1.15s backwards; }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }

/* Credenciais caem e balançam como crachá pendurado */
.cta { animation: cracha 1.2s cubic-bezier(.3,1.2,.5,1) 1.25s backwards; }
.cta--patrocinador { animation-name: cracha-dir; animation-delay: 1.4s; }
@keyframes cracha {
  0% { opacity: 0; transform: translateY(-60px) rotate(-12deg); }
  45% { opacity: 1; transform: translateY(0) rotate(5deg); }
  70% { transform: rotate(-2.5deg); }
  88% { transform: rotate(1deg); }
}
@keyframes cracha-dir {
  0% { opacity: 0; transform: translateY(-60px) rotate(12deg); }
  45% { opacity: 1; transform: translateY(0) rotate(-5deg); }
  70% { transform: rotate(2.5deg); }
  88% { transform: rotate(-1deg); }
}
.contagem { animation: sobe .7s ease-out 1.7s backwards; }
.contagem__lista strong { display: inline-block; }
.contagem__lista strong.tique { animation: tique .35s ease-out; }
@keyframes tique { from { opacity: 0; transform: translateY(-45%); } }

.selo { animation: selo-entra .9s cubic-bezier(.3,1.6,.5,1) 1.3s backwards; }
@keyframes selo-entra { from { opacity: 0; transform: scale(0) rotate(-90deg); } }
.selo__texto { animation: pulsa 2.6s ease-in-out 2.4s infinite; }
@keyframes pulsa { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }

.lancamento a::after { display: inline-block; animation: seta 1.8s ease-in-out infinite; }

/* Revelação ao rolar (só com JS ligado) */
.js .revelar { opacity: 0; transform: translateY(32px); transition: opacity .8s ease-out, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .revelar--lado { transform: translateX(48px); }
.js .revelar.visivel { opacity: 1; transform: none; }
main, .rodape { overflow-x: clip; }
.numeros .revelar:nth-child(2) { transition-delay: .12s; }
.numeros .revelar:nth-child(3) { transition-delay: .24s; }
.numeros div { position: relative; }
.js .numeros .revelar { border-top-color: transparent; }
.numeros .revelar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--amarelo);
  transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.8,.2,1) .3s;
}
.numeros .revelar:nth-child(2)::before { background: var(--ciano); }
.numeros .revelar:nth-child(3)::before { background: var(--branco); }
.numeros .revelar.visivel::before, .sem-js .numeros .revelar::before { transform: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .selo { right: 24px; top: 96px; width: 120px; }
  .selo__texto { font-size: 14px; }
  .hero__deco { opacity: .55; }
}
@media (max-width: 860px) {
  .participe { grid-template-columns: 1fr; }
  .participe__texto { position: static; }
  .js .revelar--lado { transform: translateY(32px); }
  .rodape { flex-direction: column; align-items: flex-start; }
  .rodape__info { text-align: left; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero { display: flex; flex-direction: column; align-items: center; padding-top: 122px; }
  .hero__deco { height: auto; width: 44vw; max-width: none; opacity: .5; object-fit: contain; }
  .hero__deco--esq {
    top: auto; bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 0 100%, #000 35%, transparent 72%);
            mask-image: radial-gradient(circle at 0 100%, #000 35%, transparent 72%);
  }
  .hero__deco--dir {
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 35%, transparent 72%);
            mask-image: radial-gradient(circle at 100% 0, #000 35%, transparent 72%);
  }
  .hero__publico { width: 100%; }
  .hero__edicao { gap: 10px; text-align: center; }
  .hero__edicao::before, .hero__edicao::after { width: 16px; flex: none; }
  .selo { position: relative; top: auto; right: auto; order: -1; width: 104px; margin: 0 auto 8px; }
  .selo__texto { font-size: 12px; }
  .titulo__novas { margin-left: 2%; }
  .titulo__negocios { margin-right: 0; }
  .quando { flex-direction: column; gap: 14px; }
  .quando__info { text-align: center; border-left: 0; padding-left: 0; padding-top: 12px; border-top: 2px solid var(--amarelo); }
  .acoes { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: 1fr; gap: 14px; }
  .numeros div { display: flex; align-items: baseline; gap: 14px; }
  .numeros dd { margin: 0; }
  .form { grid-template-columns: 1fr; }
  .marca img { height: 78px; }
  .topo__insta span { display: none; }
  .topo__insta { padding: 8px; }
  .contagem { flex-direction: column; gap: 10px; }
  .contagem__lista li { padding: 0 11px; }
  .contagem__lista strong { font-size: 22px; }
  .cta { --canhoto: 74px; min-height: 116px; }
  .lancamento a { width: 100%; text-align: center; }
  .rodape__logos img.rodape__prefeitura { border-left: 0; padding-left: 0; }
}

/* Movimento reduzido: só desliga a rolagem suave. As animações decorativas
   são parte do pedido do cliente e continuam (são curtas ou lentas). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}