/* ============================================================
   Base global — reset enxuto + tipografia da marca (Onest).
   ============================================================ */
/* ============================================================
   Tokens de design — Pré Candidatura Fernanda Magalhães
   Paleta oficial (ver paleta-de-cores). Um único ponto de verdade
   para cores, tipografia e raios usados na página.
   ============================================================ */
:root {
  /* --- Paleta --- */
  --laranja-forte: #ca5c2b;
  --laranja: #cf7233;
  --laranja-dourado: #d9962e;
  --roxo-escuro: #4f2d70;
  --roxo: #5d3a8a;
  --roxo-claro: #7a5799;
  --verde: #439c65;
  --creme: #fbf6ef;
  --grafite: #353535;

  /* --- Paleta da arte "Estou com Fernanda" ---
     Amostradas com conta-gotas na própria arte oficial (BANNER-ESTOU.png).
     São vizinhas das cores acima, mas um tom mais vivas — e é nelas que a
     página principal se apoia, para o cartão e a barra do topo baterem
     EXATAMENTE com o laranja e o verde impressos no banner. As cores antigas
     seguem valendo para as demais páginas (obrigado, documentos legais e as
     captações rápidas), que continuam no roxo. */
  --laranja-arte: #e87229; /* fundo do cartão e da barra do topo */
  --laranja-arte-escuro: #cf5f1e; /* cor de espera, antes de a foto chegar */
  --verde-arte: #009c61; /* CTA "Quero apoiar" (o verde do banner) */
  --verde-arte-escuro: #007c4d;
  --creme-arte: #fcf5ee; /* campos do formulário e textos sobre o laranja */

  /* --- Papéis semânticos --- */
  --cta-inicio: var(--laranja-dourado); /* gradiente do botão CTA */
  --cta-fim: var(--laranja-forte);
  --titulo-destaque: var(--laranja); /* "FERNANDA MAGALHÃES" */
  --titulo-verde: var(--verde); /* "EU VOU" */
  --eyebrow: var(--laranja-dourado); /* linha de apoio acima do título */
  --texto-claro: var(--creme);
  --texto-suave: rgba(251, 246, 239, 0.82);

  /* Campos (pílulas translúcidas sobre o fundo roxo) */
  --campo-fundo: rgba(93, 58, 138, 0.45);
  --campo-borda: rgba(174, 143, 209, 0.75);
  --campo-borda-foco: var(--laranja-dourado);
  --campo-placeholder: rgba(251, 246, 239, 0.6);

  /* --- Tipografia --- */
  --fonte: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Formas --- */
  --raio-pill: 999px;
  --raio-card: 22px;
}

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

* {
  margin: 0;
}

html,
body,
#root {
  height: 100%;
}

body {
  font-family: var(--fonte);
  color: var(--texto-claro);
  background: var(--roxo-escuro);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}
/* ============================================================
   Página principal (/) — só o que é exclusivo do cadastro.

   A barra do topo, a foto de fundo e a escala estão em
   Moldura.module.css; o cartão laranja e o banner, em
   Cartao.module.css. Os dois são compartilhados com a página de
   obrigado, e é o que faz as duas telas parecerem a mesma página.
   ============================================================ */

/* Proporção do cartão DESTA página (altura ÷ largura), lida pela Moldura para
   descobrir qual largura cabe na altura da tela. Aqui o cartão é comprido: o
   banner mais os campos, o aceite e o botão.
   AJUSTE AQUI: subir o número estreita o cartão; descer, alarga. */
._escala_1qk9u_14 {
  --k: 1.45;
}

/* Título de verdade da página: o banner já traz "ESTOU COM Fernanda Magalhães
   2030" desenhado, então o <h1> existe só para leitores de tela e buscadores.
   Sem `display: none` — isso o esconderia deles também. */
._somenteLeitor_1qk9u_21 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reforços abaixo do cartão ---------- */
._chips_1qk9u_34 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: clamp(8px, 1.4vh, 18px) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  animation: _chipsReveal_1qk9u_1 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

._chip_1qk9u_34 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: max(11px, calc(12.5 * var(--u)));
  font-weight: 600;
  color: var(--creme-arte);
  /* A foto ao fundo tem áreas claras (bandeiras, céu): a sombra garante que a
     linha continue legível em cima de qualquer uma delas. */
  text-shadow: 0 1px 6px rgba(30, 12, 0, 0.9);
}

._chipIcone_1qk9u_58 {
  color: #8ff0c0;
}

@keyframes _chipsReveal_1qk9u_1 {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._chips_1qk9u_34 {
    animation: none;
  }
}

/* Celular baixo: os reforços saem de cena.
   Eles ocupam duas linhas nesta largura (~50px com o respiro), e são
   exatamente os 50px que faltam para o botão "Quero apoiar" caber na tela sem
   rolagem. De tudo que está na página, esta linha é a única que pode sair sem
   custar cadastro — o que sustenta a conversão é o banner, a chamada e o
   formulário. Numa tela alta ela volta sozinha. */
@media (max-width: 619px) and (max-height: 820px) {
  ._chips_1qk9u_34 {
    display: none;
  }
}
/* ============================================================
   Moldura das páginas da campanha — barra laranja no topo, foto do
   comício ao fundo e o conteúdo centralizado sobre ela.

   Compartilhada pelo cadastro (/) e pela página de obrigado
   (/confirmacao): as duas são a mesma página aos olhos de quem se
   inscreveu, e é isso que este arquivo garante.
   ============================================================ */
._pagina_1mytu_17 {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* Cor de espera: a página já pinta no laranja da marca enquanto a foto do
     fundo não chegou, então a tela nunca aparece branca. */
  background: var(--laranja-arte-escuro);

  /* ============================================================
     ESCALA DO CARTÃO — a conta que faz a página caber na tela

     A largura do cartão não é um número fixo: ela é DEDUZIDA da altura
     que sobra na tela. Numa tela baixa o cartão fica mais estreito, e
     como tudo lá dentro é medido em `--u` (ver abaixo), o conteúdo
     inteiro encolhe junto, na mesma proporção. É isso que evita o
     resultado quebrado de encolher só a caixa e deixar o conteúdo do
     tamanho de antes.

     A ordem da conta (de dentro para fora):
       1. `--altura-livre`  → o que sobra depois da barra e dos respiros
       2. dividida por `--k` → vira a largura que caberia nessa altura
       3. presa entre o mínimo e o máximo
       4. e nunca maior que a tela

     AJUSTE AQUI: os números abaixo são os controles.
     ============================================================ */

  /* Largura do cartão no tamanho cheio (telas altas). */
  --cartao-w-max: 560px;
  /* Piso: abaixo disso o texto começaria a ficar pequeno demais para ler.
     Chegando aqui, a página volta a rolar em vez de encolher mais. */
  --cartao-w-min: 330px;
  /* Tudo que ocupa altura FORA do cartão: barra do topo, o rodapé do CNPJ,
     respiros de cima e de baixo e o que a página puser abaixo do cartão.
     Cresce um pouco em telas altas, e é por isso que tem uma parte fixa e uma
     em `vh`. (Eram 64px antes de o rodapé entrar.) */
  --fora: calc(84px + 10vh);
  /* Altura ÷ largura do cartão. Cada página redefine este número pela
     `className` da Moldura, porque os cartões têm alturas diferentes: o do
     cadastro é comprido (formulário), o da confirmação é curto. Serve só para
     descobrir qual largura cabe na altura da tela. */
  --k: 1.45;

  --altura-livre: calc(100dvh - var(--fora));
  --cartao-w: min(
    calc(100vw - 24px),
    max(var(--cartao-w-min), min(var(--cartao-w-max), calc(var(--altura-livre) / var(--k))))
  );

  /* A UNIDADE DA PÁGINA. Vale 1px quando o cartão está no tamanho cheio e
     encolhe junto com ele. Dentro do cartão nada é medido em px: tudo é
     `calc(N * var(--u))`. Trocar `--cartao-w-max` re-escala a página inteira.
     Exceção proposital: os tamanhos de fonte têm um piso em px (`max(...)`),
     senão o texto acompanharia a redução até virar ilegível. */
  --u: calc(var(--cartao-w) / 560);

  /* AJUSTE AQUI: arredondamento do cartão. */
  --cartao-raio: calc(30 * var(--u));
}

/* ---------- Sem a barra do topo (`barra={false}`, hoje só a /linktree) ----------
   A altura que a barra ocupava volta para o cartão (daí o `--fora` menor), e
   parte dela vira respiro acima do cartão: sem a barra, o cartão encostaria no
   alto da tela. O restante é o que a página ganha de largura. */
._semBarra_1mytu_151 {
  --fora: calc(52px + 10vh);
}

._semBarra_1mytu_151 ._centro_1mytu_159 {
  padding-top: clamp(16px, 3vh, 40px);
}

/* Foto de ambiente. `fixed` para não rolar junto com o cartão — a página
   ganha profundidade e o navegador não precisa repintar a foto a cada rolagem.
   Já sai do arquivo escurecida (ver o README): contraste garantido, sem custo
   de GPU no celular. */
._fundo_1mytu_175 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* ---------- Barra do topo ---------- */
._barra_1mytu_197 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Medidas em `vh` (e não `vw`): a barra é altura que o cartão deixa de ter,
     então quem manda no tamanho dela é a altura da tela. */
  padding: clamp(7px, 1.2vh, 15px) 20px;
  background: var(--laranja-arte);
}

._barraLogo_1mytu_221 {
  /* AJUSTE AQUI: tamanho da logo na barra do topo. */
  height: clamp(24px, 4.2vh, 42px);
  width: auto;
}

/* ---------- Área do conteúdo ---------- */
._centro_1mytu_159 {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Mesma lógica da barra: respiro medido pela altura da tela. O `--fora` lá
     em cima é a soma aproximada disto tudo — mexeu aqui, confira lá. */
  padding: clamp(9px, 1.7vh, 26px) 12px clamp(12px, 2.2vh, 38px);
}

/* ---------- Rodapé: identificação legal da candidatura ----------
   Exigência da legislação eleitoral, e também o que dá a quem chegou pelo
   anúncio a certeza de estar no canal oficial. Miúdo, mas com contraste de
   verdade sobre a foto (daí a sombra do texto): letra apagada demais não
   cumpre o papel de identificar. A altura desta faixa está somada no `--fora`
   lá em cima — mexeu no respiro daqui, confira lá. */
._rodape_1mytu_271 {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 10px;
  padding: 0 14px clamp(8px, 1.4vh, 16px);
  text-align: center;
  font-size: max(9.5px, 0.68rem);
  line-height: 1.35;
  font-weight: 500;
  color: rgba(252, 245, 238, 0.78);
  text-shadow: 0 1px 6px rgba(30, 12, 0, 0.9);
}

/* Botão de contato (só onde a página pede — ver a prop `contato`). Pílula
   discreta: dá alvo de toque no celular sem virar um chamado. Em tela estreita
   ele desce para a linha de baixo sozinho, pelo `flex-wrap` acima. */
._contato_1mytu_313 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--raio-pill);
  background: rgba(20, 8, 0, 0.28);
  color: rgba(252, 245, 238, 0.92);
  text-decoration: none;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

._contato_1mytu_313:hover {
  background: rgba(20, 8, 0, 0.45);
  color: var(--creme-arte);
}

._contato_1mytu_313 svg {
  flex: none;
  opacity: 0.8;
}

/* Foco visível em qualquer coisa dentro da moldura. */
._pagina_1mytu_17 :focus-visible {
  outline: 3px solid rgba(251, 246, 239, 0.9);
  outline-offset: 3px;
}
/* ============================================================
   Cartão laranja da campanha — banner da arte no topo, conteúdo abaixo.
   Compartilhado pelo cadastro (/) e pela página de obrigado
   (/confirmacao). Vive dentro de uma <Moldura>, de quem herda a escala
   (--u) e a largura (--cartao-w).
   ============================================================ */
._cartao_1cmb4_7 {
  width: var(--cartao-w);
  border-radius: var(--cartao-raio);
  background: var(--laranja-arte);
  /* Recorta os cantos de cima do banner, que encosta nas bordas do cartão. */
  overflow: hidden;
  box-shadow: 0 34px 70px -28px rgba(48, 18, 0, 0.75);

  /* O CTA de dentro do cartão é o VERDE do banner nesta campanha (o laranja do
     botão desapareceria dentro do cartão, que já é laranja). O botão lê estas
     variáveis — ver Button.module.css —, então a troca acontece sem um segundo
     componente de botão. */
  --cta-inicio: var(--verde-arte);
  --cta-fim: var(--verde-arte-escuro);
  --cta-sombra: rgba(0, 90, 56, 0.55);
  --cta-caixa: none; /* "Quero apoiar", e não "QUERO APOIAR" */
  --cta-espaco: 0.2px;
}

/* Banner da campanha. O `aspect-ratio` reserva a altura ANTES de a imagem
   chegar, senão o conteúdo salta para baixo no meio do carregamento (e a
   pessoa erra o campo que ia tocar). */
._banner_1cmb4_29 {
  display: block;
  width: 100%;
  height: auto;
  /* 369x232 (1,5905) — a proporção do arquivo. A arte de retrato é diagramada
     nessa medida de propósito, então ela preenche a caixa EXATAMENTE: não há
     recorte nem sobra.

     Trocar o arquivo por uma exportação maior (ex.: 1107x696, para telas 3×)
     não exige mexer em nada aqui — a proporção é a mesma. Trocar por uma arte
     de OUTRA proporção exige atualizar este número, senão o cartão pula de
     altura enquanto a imagem carrega. */
  aspect-ratio: 369 / 232;
  /* Rede de segurança: se um dia a arte vier com proporção um pouco diferente
     da declarada acima, ela preenche a caixa em vez de distorcer. */
  object-fit: cover;
  object-position: center;
  /* Cantos de baixo arredondados; os de cima quem recorta é o cartão. */
  border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u));
  background: var(--verde-arte); /* cor de espera, no verde da própria arte */
}

@media (min-width: 620px) {
  ._banner_1cmb4_29 {
    aspect-ratio: 1180 / 304;
  }
}

._corpo_1cmb4_57 {
  padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u));
}

/* ---------- Entrada (aparece ao carregar/atualizar a página) ---------- */
@keyframes _cartaoReveal_1cmb4_1 {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._cartao_1cmb4_7 {
  animation: _cartaoReveal_1cmb4_1 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}

/* Acessibilidade: sem animação para quem prefere movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
  ._cartao_1cmb4_7 {
    animation: none;
  }
}
/* ============================================================
   Formulário de cadastro — pílulas CREME dentro do cartão laranja
   da página principal, com rótulo visível acima de cada uma.

   Por que rótulo visível (e não só placeholder, como no modelo da arte):
   são cinco campos, e um deles é opcional. Placeholder some ao digitar —
   com o formulário meio preenchido, ninguém mais sabe qual campo é qual,
   nem que o e-mail podia ficar em branco. O rótulo custa uma linha de
   texto e evita o erro; o mesmo padrão de /lideranca e /apoiadores.

   Todo o contraste aqui é calculado sobre o LARANJA do cartão
   (--laranja-arte): campos creme, texto grafite dentro deles, rótulos
   creme por fora. As cores vivem em src/styles/tokens.css.

   MEDIDAS: nada aqui é px. Tudo é `calc(N * var(--u))`, a unidade que a
   página define em Hero.module.css a partir da altura da tela — assim o
   formulário inteiro encolhe junto com o cartão em vez de estourar para
   fora dele. Os tamanhos de fonte levam um piso (`max(12px, ...)`) para
   não acompanharem a redução até o ilegível.
   ============================================================ */
._wrap_q7pq9_41 {
  width: 100%;
}

/* Chamada do cartão, logo abaixo do banner (texto em `CAPTURA_CAMPANHA`,
   em src/config.ts). Centralizada e com a medida de linha curta, como no
   modelo da arte. */
._subtitle_q7pq9_55 {
  margin: 0 auto calc(20 * var(--u));
  max-width: 42ch;
  text-align: center;
  /* AJUSTE AQUI: tamanho da chamada */
  font-size: max(13px, calc(17 * var(--u)));
  font-weight: 500;
  line-height: 1.45;
  color: var(--creme-arte);
}

._form_q7pq9_77 {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u)); /* AJUSTE AQUI: espaço vertical entre os campos */
}

._group_q7pq9_89 {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}

/* ---------- Rótulos ---------- */
._label_q7pq9_105 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: calc(18 * var(--u)); /* alinha com o texto DENTRO da pílula */
  font-size: max(10.5px, calc(12.4 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--creme-arte);
}

/* Asterisco dos obrigatórios. Como os obrigatórios são a regra e a exceção é
   o e-mail, quem carrega a informação de verdade é a etiqueta "opcional"
   ao lado — o asterisco fica como reforço visual. */
._req_q7pq9_133 {
  color: rgba(252, 245, 238, 0.75);
  font-weight: 700;
}

/* Etiqueta do único campo que pode ficar em branco. */
._opcional_q7pq9_145 {
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: var(--raio-pill);
  border: 1px solid rgba(252, 245, 238, 0.45);
  background: rgba(252, 245, 238, 0.16);
  font-size: max(9px, calc(10.6 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--creme-arte);
}

/* ---------- Campos ---------- */
/* Pílula creme CHAPADA (sem transparência nem desfoque): sobre o laranja
   ela precisa de contraste próprio, e um campo opaco também é o que a
   câmera do celular e o preenchimento automático leem melhor. */
._field_q7pq9_177 {
  width: 100%;
  padding: calc(14 * var(--u)) calc(22 * var(--u)); /* AJUSTE AQUI: altura das pílulas */
  border-radius: var(--raio-pill);
  border: 2px solid transparent;
  background: var(--creme-arte);
  color: #43301f;
  /* AJUSTE AQUI: tamanho do texto/placeholder dos campos. O piso é 16px de
     propósito, e não um valor menor: abaixo disso o Safari do iPhone dá zoom
     na tela sozinho quando o campo recebe o toque. */
  font-size: max(16px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 0 rgba(90, 34, 0, 0.12);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._field_q7pq9_177::placeholder {
  color: rgba(67, 48, 31, 0.5);
  font-weight: 400;
  letter-spacing: 0.2px;
}

._field_q7pq9_177:hover {
  border-color: rgba(0, 156, 97, 0.35);
}

/* Foco no VERDE da marca — o mesmo do botão, e o único tom que se destaca
   tanto do creme do campo quanto do laranja do cartão. */
._field_q7pq9_177:focus {
  outline: none;
  border-color: var(--verde-arte);
  box-shadow: 0 0 0 3px rgba(0, 156, 97, 0.28);
}

/* Cidade + bairro na mesma linha (campos curtos). Abaixo de 480px eles
   empilham — ver a media query no fim do arquivo. */
._row_q7pq9_255 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(11 * var(--u));
}

/* CTA no destaque do modelo: pílula verde, larga e centralizada. A cor e a
   caixa do texto vêm das variáveis definidas em `.cartao` (Hero.module.css);
   aqui só o tamanho. */
._actions_q7pq9_273 {
  display: flex;
  justify-content: center;
  margin-top: calc(10 * var(--u));
}

._actions_q7pq9_273 > button {
  width: min(calc(330 * var(--u)), 100%); /* AJUSTE AQUI: largura do botão */
  padding-top: calc(16 * var(--u));
  padding-bottom: calc(16 * var(--u));
  font-size: max(15px, calc(18 * var(--u)));
}

/* ---------- Checkbox de consentimento (LGPD) ---------- */
._consent_q7pq9_301 {
  margin-top: calc(2 * var(--u));
}

._consentLabel_q7pq9_309 {
  display: flex;
  align-items: flex-start;
  gap: calc(9 * var(--u));
  cursor: pointer;
  font-size: max(10.5px, calc(12.4 * var(--u)));
  line-height: 1.4;
  color: rgba(252, 245, 238, 0.92);
}

._consentBox_q7pq9_329 {
  flex: none;
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  margin-top: calc(1 * var(--u));
  accent-color: var(--verde-arte);
  cursor: pointer;
}

._consentLink_q7pq9_347 {
  color: var(--creme-arte);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

._consentLink_q7pq9_347:hover {
  filter: brightness(1.1);
}

/* ---------- Entrada escalonada (continua a sequência do Hero) ----------
   A frase surge após o título, depois cada campo, e o botão por último. */
@keyframes _fcReveal_q7pq9_1 {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._subtitle_q7pq9_55,
._form_q7pq9_77 > * {
  animation: _fcReveal_q7pq9_1 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

._subtitle_q7pq9_55 {
  animation-delay: 0.28s;
}

/* Campos, aceite e botão, um a um
   (nome → whatsapp → cidade+bairro → e-mail → LGPD → botão). */
._form_q7pq9_77 > *:nth-child(1) {
  animation-delay: 0.36s;
}
._form_q7pq9_77 > *:nth-child(2) {
  animation-delay: 0.43s;
}
._form_q7pq9_77 > *:nth-child(3) {
  animation-delay: 0.5s;
}
._form_q7pq9_77 > *:nth-child(4) {
  animation-delay: 0.57s;
}
._form_q7pq9_77 > *:nth-child(5) {
  animation-delay: 0.64s;
}
._form_q7pq9_77 > *:nth-child(6) {
  animation-delay: 0.71s;
}
._form_q7pq9_77 > *:nth-child(7) {
  animation-delay: 0.78s;
}
._form_q7pq9_77 > *:nth-child(8) {
  animation-delay: 0.85s;
}

@media (prefers-reduced-motion: reduce) {
  ._subtitle_q7pq9_55,
  ._form_q7pq9_77 > * {
    animation: none;
  }
}

/* ---------- Erros ----------
   Dentro de um cartão laranja, "vermelho claro" não vira aviso nenhum: fica
   na mesma família da cor de fundo e passa batido. Por isso o erro aqui é o
   contrário — vermelho CHAPADO e escuro, com o texto em branco. Não há como
   confundir com decoração, e o contraste não depende do fundo. */
._fieldInvalid_q7pq9_491,
._fieldInvalid_q7pq9_491:hover {
  border-color: #b3261e;
  background: #fdeceb;
}

._fieldInvalid_q7pq9_491:focus {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.3);
}

._fieldInvalid_q7pq9_491::placeholder {
  color: rgba(112, 26, 20, 0.6);
}

/* Aceite (LGPD) não marcado ao enviar: texto realçado. */
._consentInvalid_q7pq9_523 {
  color: #ffe3de;
}

._consentInvalid_q7pq9_523 ._consentBox_q7pq9_329 {
  outline: 2px solid #b3261e;
  outline-offset: 2px;
  border-radius: 4px;
}

._error_q7pq9_543 {
  /* `.group` é uma coluna flex: sem o `align-self`, a pílula esticaria de
     ponta a ponta em vez de ficar do tamanho do texto. */
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 0 calc(14 * var(--u));
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: var(--raio-pill);
  background: #b3261e;
  font-size: max(10.5px, calc(12 * var(--u)));
  font-weight: 600;
  color: #fff;
}

._formError_q7pq9_573 {
  margin: 4px 0 0;
  padding: calc(11 * var(--u)) calc(18 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #b3261e;
  font-size: max(12px, calc(14 * var(--u)));
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* ---------- Tela de sucesso ----------
   Ponte de poucos instantes: o cadastro concluído leva para a página de
   obrigado (/confirmacao). Esta tela é o que aparece enquanto a troca de
   página acontece — e o que fica caso ela falhe. */
._success_q7pq9_603 {
  text-align: center;
  padding: 8px 0 4px;
}

._successIcon_q7pq9_613 {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  margin: 0 auto calc(15 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-arte), var(--verde-arte-escuro));
  box-shadow: 0 10px 24px -10px rgba(0, 80, 50, 0.8);
}

._successTitle_q7pq9_635 {
  margin: 0 0 calc(8 * var(--u));
  font-size: max(18px, calc(23 * var(--u)));
  font-weight: 800;
  color: var(--creme-arte);
}

._successText_q7pq9_649 {
  margin: 0 auto;
  max-width: 40ch;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1.5;
  color: rgba(252, 245, 238, 0.92);
}

._voucherBtn_q7pq9_665 {
  margin-top: 22px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(100deg, var(--cta-inicio), var(--cta-fim));
  color: #fff;
  font-weight: 700;
  letter-spacing: var(--cta-espaco, 0.6px);
  text-transform: var(--cta-caixa, uppercase);
  box-shadow: 0 14px 30px -12px var(--cta-sombra, rgba(202, 92, 43, 0.65));
  transition:
    transform 0.14s ease,
    filter 0.14s ease;
}

._voucherBtn_q7pq9_665:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

/* Telas MUITO estreitas: cidade e bairro deixam de dividir a linha. O corte
   caiu de 480px para 360px junto com a mudança de escala — empilhar os dois
   custa a altura de um campo inteiro, e é justamente altura o que falta.
   Acima de 360px os dois cabem lado a lado com o rótulo por cima, que é quem
   diz o que vai em cada um. */
@media (max-width: 360px) {
  ._row_q7pq9_255 {
    grid-template-columns: 1fr;
    gap: calc(11 * var(--u));
  }
}
/* CTA da marca — pílula com gradiente (modelo "PODE CONTAR COMIGO").
 *
 * A aparência é dirigida por variáveis, e não por variantes no componente:
 * quem envolve o botão decide a cor e a caixa do texto. É assim que o mesmo
 * botão sai laranja e em CAIXA ALTA nas páginas roxas e verde, em caixa
 * normal, dentro do cartão laranja da página principal (ver `.cartao` em
 * Hero.module.css). Os valores abaixo do `var(...)` são o padrão de sempre. */
._button_1hdfg_8 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px; /* AJUSTE AQUI: tamanho do botão (altura/largura) */
  border: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(100deg, var(--cta-inicio) 0%, var(--cta-fim) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem; /* AJUSTE AQUI: tamanho do texto do botão */
  letter-spacing: var(--cta-espaco, 1px);
  text-transform: var(--cta-caixa, uppercase);
  box-shadow:
    0 14px 30px -12px var(--cta-sombra, rgba(202, 92, 43, 0.65)),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    box-shadow 0.14s ease;
}

._button_1hdfg_8:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 20px 38px -14px var(--cta-sombra, rgba(202, 92, 43, 0.72)),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

._button_1hdfg_8:active:not(:disabled) {
  transform: translateY(0);
}

._button_1hdfg_8:focus-visible {
  outline: 3px solid rgba(251, 246, 239, 0.9);
  outline-offset: 3px;
}

._button_1hdfg_8:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._block_1hdfg_52 {
  width: 100%;
}

._label_1hdfg_56 {
  display: inline-block;
  line-height: 1;
}
/* ============================================================
   Página de obrigado (/confirmacao) — só o que é exclusivo dela.

   A barra do topo, a foto de fundo e a escala vêm de
   Moldura.module.css; o cartão laranja e o banner, de
   Cartao.module.css. São os MESMOS componentes do cadastro, e é o que
   faz esta tela ser a continuação daquela em vez de parecer outro site.

   (As páginas de obrigado de /lideranca e /apoiadores continuam roxas,
   no desenho antigo: são HTML estático, à parte, e combinam com o
   visual das suas próprias páginas de captação.)
   ============================================================ */

/* Proporção do cartão DESTA página (altura ÷ largura), lida pela Moldura para
   descobrir qual largura cabe na altura da tela. Aqui o cartão é bem mais
   curto que o do cadastro — não há formulário, só a confirmação e um botão —,
   por isso o número é menor: ele pode ficar largo mesmo em tela baixa.
   AJUSTE AQUI: subir o número estreita o cartão; descer, alarga. */
._escala_862n9_37 {
  --k: 1.05;
}

._icone_862n9_45 {
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  margin: 0 auto calc(16 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-arte), var(--verde-arte-escuro));
  box-shadow: 0 10px 24px -10px rgba(0, 80, 50, 0.85);
}

._icone_862n9_45 svg {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

._titulo_862n9_77 {
  margin: 0 0 calc(10 * var(--u));
  text-align: center;
  font-size: max(19px, calc(26 * var(--u)));
  font-weight: 800;
  line-height: 1.18;
  color: var(--creme-arte);
  text-wrap: balance;
}

._texto_862n9_97 {
  margin: 0 auto;
  max-width: 40ch;
  text-align: center;
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.45;
  color: rgba(252, 245, 238, 0.92);
}

/* Entrar no grupo — a próxima ação depois do cadastro, e o motivo desta página
   existir para quem se inscreveu. Pílula, como todo botão da campanha. */
._whatsapp_862n9_119 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  /* Largura pensada para o rótulo caber numa LINHA SÓ até em tela de 360px
     (com o `nowrap` abaixo): "Entrar no grupo do WhatsApp" quebrado em duas
     linhas tira do botão a cara de botão. */
  width: min(calc(460 * var(--u)), 100%);
  margin: calc(22 * var(--u)) auto 0;
  padding: calc(16 * var(--u)) calc(16 * var(--u));
  border-radius: var(--raio-pill);
  background: #25d366;
  font-size: max(14px, calc(17 * var(--u)));
  white-space: nowrap;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(6, 90, 40, 0.75);
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}

._whatsapp_862n9_119:hover {
  background: #1eba59;
}

._whatsapp_862n9_119:active {
  transform: translateY(1px);
}

._whatsapp_862n9_119 svg {
  flex: none;
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
}

._voltar_862n9_195 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: calc(16 * var(--u));
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 600;
  color: rgba(252, 245, 238, 0.88);
  text-decoration: none;
  transition: color 0.12s ease;
}

._voltar_862n9_195:hover {
  color: var(--creme-arte);
  text-decoration: underline;
  text-underline-offset: 3px;
}

._voltar_862n9_195 svg {
  flex: none;
}
/* ============================================================
   Voucher / Ingresso — Pré Candidatura Fernanda Magalhães
   Identidade: roxo (#4F2D70/#5D3A8A) + laranja/dourado (#CA5C2B/#D9962E).
   Página isolada (rota /ingresso), aberta em nova aba após a confirmação.
   ============================================================ */
.qrv {
  min-height: 100dvh;
  margin: 0;
  padding: 28px 18px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #3b2257 0%, #4f2d70 100%);
  font-family: var(--fonte);
  color: var(--creme);
}

/* ---------- Cabeçalho de conclusão (topo, fora do card) ---------- */
.qrv__intro {
  width: min(380px, 100%);
  box-sizing: border-box;
  text-align: center;
}

.qrv__intro-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.12;
  color: var(--creme);
}

.qrv__intro-accent {
  color: var(--laranja-dourado);
}

.qrv__intro-text {
  margin: 10px 0 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(251, 246, 239, 0.82);
}

.qrv__intro-text strong {
  color: var(--creme);
  font-weight: 700;
}

/* barra de progresso */
.qrv__progress {
  margin-top: 18px;
  text-align: left;
}

.qrv__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--creme);
}

.qrv__progress-pct {
  font-size: 1rem;
  font-weight: 800;
  color: var(--laranja-dourado);
}

.qrv__progress-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(251, 246, 239, 0.18);
  overflow: hidden;
}

.qrv__progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde), #368152);
  transform-origin: left center;
  animation: qrvProgressGrow 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes qrvProgressGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Card ---------- */
.qrv__card {
  width: min(380px, 100%);
  background: var(--creme);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 4px 10px rgba(30, 15, 48, 0.25),
    0 26px 54px -18px rgba(30, 15, 48, 0.7);
}

/* ---------- Header (roxo) ---------- */
.qrv__header {
  position: relative;
  padding: 28px 22px 26px;
  text-align: center;
  background: linear-gradient(155deg, #6a3f9c 0%, #5d3a8a 46%, #4f2d70 100%);
  color: #fff;
  border-bottom: 3px solid var(--laranja-dourado);
}

.qrv__medallion {
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--laranja-dourado), var(--laranja-forte));
  box-shadow: 0 10px 22px -10px rgba(202, 92, 43, 0.8);
}

.qrv__medallion svg {
  width: 40px;
  height: 40px;
}

.qrv__event-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.12;
  letter-spacing: 0.2px;
}

.qrv__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--laranja-dourado), var(--laranja-forte));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.qrv__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

/* ---------- Corpo ---------- */
.qrv__body {
  padding: 24px 22px 26px;
  background: var(--creme);
  color: var(--grafite);
}

.qrv__code-label {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9a8ea6;
}

.qrv__code-value {
  margin: 4px 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  color: var(--laranja-forte);
}

.qrv__divider {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 2px dashed #e2d3c2;
}

.qrv__qr-wrap {
  width: min(220px, 64vw);
  margin: 0 auto;
  padding: 14px;
  background: #fff;
  border: 3px solid var(--laranja-dourado);
  border-radius: 16px;
}

.qrv__qr-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* linhas de informação */
.qrv__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.qrv__row-icon {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: var(--roxo);
  background: rgba(93, 58, 138, 0.12);
}

.qrv__row-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9a8ea6;
}

.qrv__row-value {
  margin: 2px 0 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--grafite);
}

.qrv__hint {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(217, 150, 46, 0.14);
  border: 1px solid rgba(202, 92, 43, 0.3);
  font-size: 0.82rem;
  line-height: 1.4;
  color: #7a4a1e;
  text-align: center;
}

/* ---------- Ações ---------- */
.qrv__actions {
  width: min(380px, 100%);
  display: flex;
  gap: 12px;
}

.qrv__btn-share {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 16px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(100deg, var(--laranja-dourado), var(--laranja-forte));
  box-shadow: 0 12px 24px -12px rgba(202, 92, 43, 0.75);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.qrv__btn-share:not(:disabled):hover {
  filter: brightness(1.05);
}

.qrv__btn-download {
  flex: none;
  width: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(251, 246, 239, 0.7);
  border-radius: 14px;
  cursor: pointer;
  color: var(--creme);
  background: rgba(251, 246, 239, 0.08);
  transition: transform 0.12s ease, background 0.12s ease;
}

.qrv__btn-share:not(:disabled):active,
.qrv__btn-download:not(:disabled):active {
  transform: translateY(1px);
}

.qrv__btn-download:not(:disabled):hover {
  background: rgba(251, 246, 239, 0.16);
}

.qrv__btn-share:disabled,
.qrv__btn-download:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Botão "Entrar no Grupo" (WhatsApp) — verde característico do app. */
.qrv__btn-whatsapp {
  width: min(380px, 100%);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: #25d366;
  box-shadow: 0 12px 24px -12px rgba(37, 211, 102, 0.8);
  transition: transform 0.12s ease, background 0.12s ease;
}

.qrv__btn-whatsapp:hover {
  background: #1eba59;
}

.qrv__btn-whatsapp:active {
  transform: translateY(1px);
}

.qrv__actions-hint {
  width: min(380px, 100%);
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(251, 246, 239, 0.72);
}

/* ---------- Estado vazio (link inválido) ---------- */
.qrv__empty {
  width: min(380px, 100%);
  margin-top: 12vh;
  padding: 30px 24px;
  text-align: center;
  background: var(--creme);
  color: var(--grafite);
  border-radius: 20px;
  box-shadow: 0 26px 54px -18px rgba(30, 15, 48, 0.7);
}

.qrv__empty h1 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--roxo-escuro);
}

.qrv__empty p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6a5f75;
}

/* ---------- Identificação legal da candidatura ----------
   Exigência da legislação eleitoral. Fica no pé da página e FORA do
   `.qrv__card`, que é o elemento capturado como imagem no compartilhar/salvar
   — o CNPJ pertence à página, não à arte que a pessoa manda no WhatsApp. */
.qrv__legal {
  width: min(380px, 100%);
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(251, 246, 239, 0.66);
}
/* ============================================================
   Layout de documentos legais (Termo de Imagem / Privacidade).
   Leitura confortável sobre o fundo da marca.
   ============================================================ */
._page_qpri7_9 {
  min-height: 100%;
  padding: 40px 20px 72px;
  background: var(--roxo-escuro);
}

._container_qpri7_21 {
  max-width: 760px;
  margin: 0 auto;
}

._back_qpri7_31 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--laranja-dourado);
  text-decoration: none;
}

._back_qpri7_31:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

._card_qpri7_63 {
  padding: 36px 38px;
  border-radius: var(--raio-card);
  background: rgba(93, 58, 138, 0.35);
  border: 1.5px solid var(--campo-borda);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

._title_qpri7_81 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--texto-claro);
  line-height: 1.2;
}

._subtitle_qpri7_97 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

._updated_qpri7_109 {
  margin: 0 0 26px;
  font-size: 0.8rem;
  color: var(--campo-placeholder);
}

._section_qpri7_121 {
  margin-top: 26px;
}

._section_qpri7_121 h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--texto-claro);
}

._section_qpri7_121 p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--texto-suave);
}

._section_qpri7_121 ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

._section_qpri7_121 li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

._section_qpri7_121 a {
  color: var(--laranja-dourado);
  text-decoration: underline;
  text-underline-offset: 2px;
}

._note_qpri7_193 {
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(217, 150, 46, 0.12);
  border: 1px solid rgba(217, 150, 46, 0.4);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

@media (max-width: 560px) {
  ._card_qpri7_63 {
    padding: 26px 20px;
  }

  ._title_qpri7_81 {
    font-size: 1.4rem;
  }
}
/* ============================================================
   Página de links (/linktree) — só o que é exclusivo dela.

   A barra do topo, a foto do comício ao fundo e a escala vêm de
   Moldura.module.css; o cartão laranja e o banner, de
   Cartao.module.css. São os MESMOS componentes do cadastro (/) e da
   página de obrigado (/confirmacao) — quem vier da bio do Instagram e
   depois tocar em "Estou com Fernanda" não sente troca de site.
   ============================================================ */

/* Proporção do cartão DESTA página (altura ÷ largura), lida pela Moldura para
   descobrir qual largura cabe na altura da tela.

   Aqui o número é MENOR do que a altura real do cartão pediria, e isso é de
   propósito: com sete links empilhados, respeitar a altura de um celular
   deixaria o cartão estreito como uma tira. Esta é a única página da campanha
   em que ROLAR é o esperado — é o gesto de toda página de links —, então
   fixamos uma largura confortável e deixamos o resto acontecer abaixo da
   dobra. A foto do fundo é `fixed`, então ela não rola junto.
   AJUSTE AQUI: subir o número estreita o cartão; descer, alarga. */
._escala_hae0a_41 {
  --k: 1.25;
}

/* Título de verdade da página: o banner já traz "ESTOU COM Fernanda Magalhães
   2030" desenhado, então o <h1> existe só para leitores de tela e buscadores
   — senão o título seria anunciado duas vezes. Mesmo padrão do cadastro. */
._somenteLeitor_hae0a_55 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Uma linha só, logo abaixo do banner: diz o que é esta página para quem caiu
   aqui vindo da bio e nunca viu a campanha. */
._chamada_hae0a_83 {
  margin: 0 0 calc(16 * var(--u));
  text-align: center;
  font-size: max(13px, calc(15.5 * var(--u)));
  font-weight: 500;
  line-height: 1.4;
  color: rgba(252, 245, 238, 0.92);
  text-wrap: balance;
}

/* ---------- Seções ----------
   Separam o que é PÁGINA DA CAMPANHA (onde a pessoa deixa o nome) do que é
   REDE SOCIAL (onde ela só acompanha) — misturados, o cadastro disputava
   atenção com um "seguir", que custa um toque e não deixa nada com a campanha.
   O rótulo é miúdo de propósito: ele organiza a leitura, não compete com os
   botões. */
._secao_hae0a_115 + ._secao_hae0a_115 {
  margin-top: calc(18 * var(--u));
}

._secaoTitulo_hae0a_123 {
  margin: 0 0 calc(8 * var(--u));
  padding-left: calc(4 * var(--u));
  font-size: max(9.5px, calc(11 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(252, 245, 238, 0.72);
}

/* ---------- Lista de links ---------- */
._lista_hae0a_145 {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada link é uma pílula creme sobre o laranja do cartão: ícone à esquerda,
   texto no meio, seta à direita. O bloco inteiro é clicável — numa página que
   nasce para o toque no celular, alvo pequeno é atrito. */
._item_hae0a_169 {
  display: flex;
  align-items: center;
  gap: calc(13 * var(--u));
  padding: calc(12 * var(--u)) calc(15 * var(--u));
  border-radius: var(--raio-pill);
  background: var(--creme-arte);
  color: #7a3410;
  text-decoration: none;
  box-shadow: 0 10px 22px -14px rgba(48, 18, 0, 0.9);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

._item_hae0a_169:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -14px rgba(48, 18, 0, 0.95);
}

._item_hae0a_169:active {
  transform: translateY(1px);
}

/* Item de DESTAQUE (`destaque: true` no config): o verde da campanha, o mesmo
   do botão "Quero apoiar" do cadastro. É o convite principal da página. */
._destaque_hae0a_225 {
  background: linear-gradient(135deg, var(--verde-arte), var(--verde-arte-escuro));
  color: var(--creme-arte);
  box-shadow: 0 14px 28px -12px rgba(0, 80, 50, 0.85);
}

._destaque_hae0a_225:hover {
  background: linear-gradient(135deg, #00b070, var(--verde-arte));
}

/* Disco do ícone. No item creme ele é laranja; no de destaque, um véu claro
   sobre o verde — nos dois casos o desenho fica no tom do próprio botão. */
._icone_hae0a_249 {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: rgba(232, 114, 41, 0.14);
  color: var(--laranja-arte);
}

._destaque_hae0a_225 ._icone_hae0a_249 {
  background: rgba(252, 245, 238, 0.18);
  color: var(--creme-arte);
}

._icone_hae0a_249 svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

._texto_hae0a_291 {
  flex: 1;
  min-width: 0;
}

._titulo_hae0a_301 {
  display: block;
  font-size: max(14px, calc(16 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
}

/* Linha de apoio: pode ser um @ de rede ou uma frase curta. Uma linha só —
   `ellipsis` em vez de quebrar, para todos os botões ficarem da mesma altura
   mesmo com textos de tamanhos diferentes. */
._descricao_hae0a_321 {
  display: block;
  margin-top: calc(2 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(11px, calc(12.5 * var(--u)));
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.72;
}

/* Seta: dica visual de que o botão leva a algum lugar. Decorativa — quem usa
   leitor de tela já ouve que é um link. */
._seta_hae0a_349 {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  opacity: 0.45;
}

/* ---------- Documentos legais, no pé do cartão ---------- */
._legal_hae0a_365 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin: calc(18 * var(--u)) 0 0;
  font-size: max(10px, calc(11.5 * var(--u)));
  color: rgba(252, 245, 238, 0.7);
}

._legal_hae0a_365 a {
  color: rgba(252, 245, 238, 0.82);
  text-decoration: none;
}

._legal_hae0a_365 a:hover {
  color: var(--creme-arte);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ============================================================
   Banner de consentimento de cookies (LGPD / ANPD).
   Segue a paleta da marca (roxo + creme + laranja).
   ============================================================ */

/* ---------- Banner de primeiro nível (barra inferior) ---------- */
._banner_1m8oj_13 {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(1080px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(48, 27, 68, 0.97);
  border: 1.5px solid var(--campo-borda);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: _ccUp_1m8oj_1 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

._bannerText_1m8oj_53 {
  flex: 1 1 auto;
  min-width: 0;
}

._bannerTitle_1m8oj_63 {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--texto-claro);
}

._bannerDesc_1m8oj_79 {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

._bannerDesc_1m8oj_79 a,
._modalIntro_1m8oj_95 a {
  color: var(--laranja-dourado);
  text-decoration: underline;
  text-underline-offset: 2px;
}

._bannerActions_1m8oj_107 {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Botões (mesmo destaque, sem dark patterns) ---------- */
._btnGhost_1m8oj_123,
._btnPrimary_1m8oj_125 {
  padding: 11px 20px;
  border-radius: var(--raio-pill);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    background 0.14s ease;
}

._btnGhost_1m8oj_123 {
  border: 1.5px solid var(--campo-borda);
  background: transparent;
  color: var(--texto-claro);
}

._btnGhost_1m8oj_123:hover {
  background: rgba(174, 143, 209, 0.18);
}

._btnPrimary_1m8oj_125 {
  border: 0;
  background: linear-gradient(100deg, var(--cta-inicio), var(--cta-fim));
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(202, 92, 43, 0.7);
}

._btnPrimary_1m8oj_125:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ---------- Botão flutuante (reabrir preferências) ---------- */
._reopen_1m8oj_197 {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 999;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--campo-borda);
  background: rgba(48, 27, 68, 0.92);
  color: var(--texto-claro);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.14s ease, background 0.14s ease;
}

._reopen_1m8oj_197:hover {
  transform: translateY(-2px);
  background: rgba(93, 58, 138, 0.95);
}

/* ---------- Modal de preferências (segundo nível) ---------- */
._overlay_1m8oj_243 {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 10, 30, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: _ccFade_1m8oj_1 0.2s ease both;
}

._modal_1m8oj_95 {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  border-radius: var(--raio-card);
  background: var(--roxo-escuro);
  border: 1.5px solid var(--campo-borda);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  animation: _ccUp_1m8oj_1 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

._modalTitle_1m8oj_293 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--texto-claro);
}

._modalIntro_1m8oj_95 {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

._category_1m8oj_321 {
  padding: 14px 0;
  border-top: 1px solid rgba(174, 143, 209, 0.28);
}

._categoryHead_1m8oj_331 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

._categoryName_1m8oj_347 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--texto-claro);
}

._always_1m8oj_359 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde);
}

._categoryDesc_1m8oj_371 {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ---------- Toggle switch ---------- */
._switch_1m8oj_387 {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: none;
  cursor: pointer;
}

._switch_1m8oj_387 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

._slider_1m8oj_419 {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(174, 143, 209, 0.35);
  border: 1px solid var(--campo-borda);
  transition: background 0.16s ease;
}

._slider_1m8oj_419::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--creme);
  transition: transform 0.16s ease;
}

._switch_1m8oj_387 input:checked + ._slider_1m8oj_419 {
  background: linear-gradient(100deg, var(--cta-inicio), var(--cta-fim));
  border-color: transparent;
}

._switch_1m8oj_387 input:checked + ._slider_1m8oj_419::before {
  transform: translateX(20px);
}

._switch_1m8oj_387 input:focus-visible + ._slider_1m8oj_419 {
  box-shadow: 0 0 0 3px rgba(217, 150, 46, 0.4);
}

._modalActions_1m8oj_487 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* ---------- Animações ---------- */
@keyframes _ccUp_1m8oj_1 {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* O banner usa translateX para centralizar; anima só a opacidade/deslocamento vertical. */
._banner_1m8oj_13 {
  animation-name: _ccBannerUp_1m8oj_1;
}

@keyframes _ccBannerUp_1m8oj_1 {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes _ccFade_1m8oj_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._banner_1m8oj_13,
  ._modal_1m8oj_95,
  ._overlay_1m8oj_243 {
    animation: none;
  }
}

/* ---------- Responsivo (mobile) ---------- */
@media (max-width: 720px) {
  ._banner_1m8oj_13 {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    bottom: 10px;
    padding: 16px 18px;
  }

  ._bannerActions_1m8oj_107 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* "Aceitar" ocupa a linha inteira abaixo, mantendo o mesmo destaque visual. */
  ._bannerActions_1m8oj_107 ._btnPrimary_1m8oj_125 {
    grid-column: 1 / -1;
  }

  ._modalActions_1m8oj_487 {
    flex-direction: column-reverse;
  }

  ._modalActions_1m8oj_487 ._btnGhost_1m8oj_123,
  ._modalActions_1m8oj_487 ._btnPrimary_1m8oj_125 {
    width: 100%;
    text-align: center;
  }
}