/* ═══════════════════════════════════════════════════════════════════
   BABI MENDES 2206 · página de cadastro
   Duas dobras e rodapé. CSS próprio, sem herança do site institucional.

   Regras que sustentam este arquivo, nesta ordem de importância:
   1. Nenhuma forma decorativa usa unidade de viewport. Toda forma é
      filha do elemento que ela decora e se posiciona em % dele.
   2. Media query de altura só altera padding e gap. Nunca height.
   3. Coluna do formulário tem largura em clamp(), não fr: a variância
      é absorvida pela coluna de texto e não existe faixa de aperto.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Cores oficiais, extraídas dos SVGs do manual de marca */
  --verde:          #20b214;
  --verde-escuro:   #117706;
  --verde-mata:     #0b4a02;
  --verde-noite:    #062f01;
  --amarelo:        #eddb03;
  --amarelo-queima: #c9b800;
  --azul:           #1100f4;
  --azul-vote-a:    #255ca9;
  --azul-vote-b:    #008ccf;

  --branco:  #ffffff;
  --osso:    #f3f6ee;
  --carvao:  #0a1207;
  --grafite: #3d4a36;
  --erro:    #a4231b;

  /* Papéis semânticos */
  --texto-suave: rgb(255 255 255 / .72);
  --linha:       rgb(255 255 255 / .16);
  --linha-clara: rgb(10 18 7 / .14);

  /* Tipografia */
  --display:    "Archivo Black", "Arial Black", sans-serif;
  --corpo:      "Barlow", -apple-system, system-ui, sans-serif;
  --condensada: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* Escala: clamp em rem + vw. vw puro ignoraria o corpo de fonte
     escolhido pelo usuário e reprovaria em WCAG 1.4.4. */
  --t-h1:     clamp(2.5rem,  2rem    + 2.6vw, 3.85rem);
  --t-h2:     clamp(1.9rem,  1.45rem + 1.7vw, 2.8rem);
  --t-numero: clamp(2.6rem,  1.9rem  + 2.6vw, 4rem);
  --t-h3:     clamp(1.2rem,  1.1rem  + .5vw,  1.5rem);
  --t-lead:   clamp(1.08rem, 1rem    + .4vw,  1.3rem);
  --t-corpo:  clamp(1rem,    .96rem  + .2vw,  1.12rem);
  --t-label:  clamp(.72rem,  .68rem  + .14vw, .82rem);

  /* Ritmo. Padding de dobra ≈ 1,6x o título: proporção de landing
     page. O institucional usava 4,7x, e era isso que dava "cara de
     site" com 256px de vazio entre seções. */
  --pad-dobra: clamp(3rem, 5.2vw, 4.75rem);
  --e-xs: .5rem;
  --e-sm: 1rem;
  --e-md: 1.5rem;
  --e-lg: 2.5rem;

  --wrap: 1200px;
  --raio: 10px;
  --raio-g: 20px;

  --transicao: 200ms cubic-bezier(.2, .7, .3, 1);
}

/* ─── 2. RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  /* clip, nunca hidden: hidden forçaria overflow-y auto, criaria um
     scroll container e quebraria position:sticky no iOS. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--branco);
  background: var(--verde-noite);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* min-width:auto em item de grid é a causa número um de overflow */
:where(.hero__grade, .cadastro__grade, .duo) > * { min-width: 0; }
/* o select é dimensionado pela opção mais longa ("Rio Grande do
   Norte") e estoura a coluna a 320px sem isto */
:where(input, select) { min-width: 0; max-width: 100%; }

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

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

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--amarelo);
  color: var(--verde-noite);
  padding: 1rem 1.5rem;
  font-weight: 700;
}
.pular:focus { left: 0; }

/* Grão de papel: uma camada só, fixa, para não denunciar a costura
   entre as dobras. Tile de 180px, rasterizado uma vez. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: soft-light;
  background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── 3. PRIMITIVOS ─────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Filete de 88x3 antes de cada kicker: micro-elemento repetido que
   faz a página parecer desenhada, não montada. */
.kicker {
  display: block;
  font-family: var(--condensada);
  font-size: var(--t-label);
  font-weight: 600;
  font-style: italic;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.kicker::before {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  background: var(--amarelo);
  margin-bottom: 1.1rem;
}

/* ─── 4. TIPOGRAFIA ─────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
}
/* Archivo Black tem altura-x grande e aberturas fechadas: acima de
   40px exige tracking negativo, senão incha. */
h1 { font-size: var(--t-h1); line-height: .9;  letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); line-height: .95; letter-spacing: -.025em; }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.02em; }

.lead { font-size: var(--t-lead); line-height: 1.5; }

/* ─── 5. BOTÕES ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: 1rem 1.8rem;
  font-family: var(--corpo);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Sombra dura, não glow: é física, sobrevive em fundo claro e escuro
   e não parece botão de SaaS genérico. */
.btn--acao {
  background: var(--amarelo);
  color: var(--verde-noite);
  box-shadow: 0 4px 0 var(--amarelo-queima);
}
.btn--acao:hover { background: #fbe93a; }
.btn--acao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--amarelo-queima); }
.btn--acao:disabled { opacity: .62; cursor: wait; transform: none; }

.btn--linha {
  border: 2px solid currentColor;
  background: transparent;
}
.btn--linha:hover { background: rgb(10 18 7 / .06); }

.btn--zap {
  background: #25d366;
  color: #04310f;
  box-shadow: 0 4px 0 #128c40;
}
.btn--zap:hover { background: #2fe075; }
.btn--zap:active { transform: translateY(3px); box-shadow: 0 1px 0 #128c40; }

.btn--bloco { width: 100%; }

/* ─── 6. TOPBAR ─────────────────────────────────────────────────
   sticky, não fixed: ocupa espaço no fluxo, então nada precisa
   compensar a altura dela. O aviso de configuração fica FORA da
   barra, para a barra ter altura constante por construção. */
.aviso-config {
  background: var(--amarelo);
  color: var(--verde-noite);
  font-family: var(--condensada);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  padding: .6rem 1rem;
}

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgb(6 47 1 / .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topbar__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
  padding-block: .7rem;
}
.topbar__marca { display: flex; align-items: center; min-height: 44px; }
.topbar__marca img { height: 40px; width: auto; }
.topbar .btn {
  min-height: 46px;
  padding: .6rem 1.3rem;
  font-size: .84rem;
}

/* ─── 7. HERÓI ──────────────────────────────────────────────────
   Sem min-height em unidade de viewport: a altura é a do conteúdo.
   Foi o 100svh combinado com formas em vh que produzia as faixas
   verdes vazias em telas de proporção diferente. */
.hero {
  --hero-pt: clamp(1.75rem, 4vw, 2.5rem);
  --hero-pb: clamp(2rem, 5vw, 3.25rem);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  background:
    radial-gradient(120% 85% at 6% -12%, rgb(32 178 20 / .17), transparent 58%),
    var(--verde-noite);
  padding-block: var(--hero-pt) 0;
}
/* Telas altas ganham respiro, nunca altura. */
@media (min-height: 50rem) { .hero { --hero-pt: 2.5rem; --hero-pb: 4rem; } }
@media (min-height: 60rem) { .hero { --hero-pt: 3.25rem; --hero-pb: 5rem; } }

.hero__grade {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: var(--hero-pb);
}

/* o texto pinta sempre por cima do palco: sem isto, o palco (que é
   posicionado) cobriria o fim dos chips em telas estreitas */
.hero__texto { position: relative; z-index: 1; }

.hero__selo {
  display: inline-flex;
  align-items: center;
  font-family: var(--condensada);
  font-size: .9rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde-noite);
  background: var(--amarelo);
  padding: .4rem 1.05rem;
  border-radius: 999px;
  margin-bottom: var(--e-md);
}

.hero__titulo { color: var(--branco); max-width: 12ch; }
.hero__titulo em { font-style: normal; color: var(--amarelo); display: block; }

.hero__slogan {
  font-family: var(--condensada);
  font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.32;
  border-left: 4px solid var(--amarelo);
  padding-left: var(--e-sm);
  margin-block: var(--e-md);
  max-width: 30ch;
}

.hero__bio {
  color: var(--texto-suave);
  line-height: 1.58;
  max-width: 46ch;
}
.hero__bio strong { color: var(--branco); font-weight: 600; }

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--e-md);
}
.selo {
  font-family: var(--condensada);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--amarelo);
  background: rgb(237 219 3 / .1);
  border: 1px solid rgb(237 219 3 / .28);
  border-radius: 999px;
  padding: .4rem .95rem;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-sm); margin-top: var(--e-lg); }
/* único elemento da página com direito a brilho, por ser o CTA
   principal sobre fundo escuro */
.hero__acoes .btn--acao { box-shadow: 0 4px 0 var(--amarelo-queima), 0 14px 36px rgb(237 219 3 / .3); }
.hero__acoes .btn--acao:active { box-shadow: 0 1px 0 var(--amarelo-queima), 0 8px 22px rgb(237 219 3 / .26); }

/* ── palco: foto e formas viram um objeto rígido ──
   O aspect-ratio espelha o PNG (900x1350). A img fica em fluxo e dá
   a altura; as formas são absolutas com inset em % DO PALCO. Assim a
   geometria relativa é idêntica em qualquer proporção de tela, e a
   deriva que existia com vh é matematicamente impossível. */
.hero__palco {
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 23rem);
  aspect-ratio: 2 / 3;
  margin-inline: auto;
}
/* arco amarelo: o nicho onde ela se apoia. Topo redondo, base reta
   encostando no chão do palco, como a pétala do símbolo. */
.hero__palco::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 14% -8% 0 6%;
  background: var(--amarelo);
  border-radius: 999px 999px 8px 8px;
}
/* disco verde deslocado: dá profundidade sem competir com o amarelo.
   O sangramento à esquerda é curto de propósito, para não invadir a
   coluna de texto em telas estreitas. */
.hero__palco::after {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 34% 40% 0 -8%;
  background: var(--verde);
  border-radius: 999px 999px 8px 8px;
  opacity: .8;
}
/* o círculo azul fica SOBRE o amarelo, na altura do ombro: sobre o
   verde-noite ele daria 1,65:1 de contraste e sumiria */
.hero__ponto {
  position: absolute;
  z-index: -1;
  inset-block-start: 26%;
  inset-inline-start: 4%;
  inline-size: 15%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--azul);
}
.hero__foto {
  position: relative;
  z-index: 0;
  inline-size: 100%;
  height: auto;
  /* sombra dura e colorida, sem blur: registro de serigrafia, e
     custa muito menos que drop-shadow borrado sobre PNG alpha */
  filter: drop-shadow(-12px 16px 0 rgb(6 47 1 / .5));
}

/* ── barra de voto: irmã em fluxo, nunca absolute ──
   Em fluxo, a base da foto encosta exatamente no topo da barra em
   qualquer tela. Com position:absolute isso derivava. */
.hero__base {
  position: relative;
  z-index: 2;
  background: rgb(3 26 0 / .58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--amarelo);
  padding-block: .7rem;
}
.hero__base-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-sm) var(--e-md);
}
.voto { display: flex; align-items: center; gap: .75rem; }
.voto__vote {
  font-family: var(--display);
  font-size: clamp(.82rem, .78rem + .2vw, 1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--azul-vote-a), var(--azul-vote-b));
  padding: .35rem .9rem;
  border-radius: 6px;
}
.voto__numero {
  font-family: var(--display);
  font-size: var(--t-numero);
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--amarelo);
}
.voto__cargo {
  font-family: var(--condensada);
  font-size: clamp(.86rem, .82rem + .2vw, 1.05rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-left: 3px solid var(--amarelo);
  padding-left: .65rem;
}
.hero__data {
  font-family: var(--condensada);
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.45;
  text-align: right;
}
.hero__data strong { color: var(--amarelo); font-weight: 700; }

/* ─── 8. CADASTRO ───────────────────────────────────────────────── */
.cadastro {
  background: var(--osso);
  color: var(--carvao);
  padding-block: var(--pad-dobra);
}
.cadastro .kicker { color: var(--verde-escuro); }
.cadastro .kicker::before { background: var(--verde); }
.cadastro h2 { color: var(--carvao); }
.cadastro__intro { color: var(--grafite); max-width: 52ch; margin-top: .75rem; }

.cadastro__grade {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: var(--e-lg);
}

/* ── cartão do formulário ──
   container query: a decisão de empilhar Estado/Cidade depende da
   largura DO CARTÃO, não da tela. Com media query o par ficava
   espremido a 1024px (cartão de 320px) e solto a 400px. */
.cartao {
  container-type: inline-size;
  container-name: form;
  background: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: 0 22px 55px rgb(6 47 1 / .16), 0 2px 0 rgb(10 18 7 / .06);
}
.cartao h3 { color: var(--carvao); }
.cartao__sub { color: var(--grafite); font-size: .96rem; margin-block: .35rem 1.2rem; }

.campo { margin-bottom: .9rem; }
.campo label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--carvao);
  margin-bottom: .3rem;
}
.campo input, .campo select {
  width: 100%;
  min-height: 52px;
  padding: .75rem .95rem;
  /* 16px é o piso: abaixo disso o iOS dá zoom ao focar e o layout
     "quebra", que é a causa clássica de "não está responsiva" */
  font-size: max(1rem, 16px);
  color: var(--carvao);
  background: var(--osso);
  border: 1px solid var(--linha-clara);
  border-bottom: 2px solid rgb(10 18 7 / .22);
  border-radius: var(--raio) var(--raio) 4px 4px;
  transition: border-color var(--transicao), background var(--transicao);
}
.campo select { cursor: pointer; }
.campo input:focus, .campo select:focus {
  outline: none;
  background: var(--branco);
  border-bottom-color: var(--verde-escuro);
}
.campo input:disabled { opacity: .55; cursor: not-allowed; }
.campo input::placeholder { color: rgb(61 74 54 / .55); }

.erro-msg {
  display: none;
  color: var(--erro);
  font-size: .85rem;
  font-weight: 600;
  margin-top: .3rem;
}
.campo.tem-erro input, .campo.tem-erro select {
  border-color: var(--erro);
  border-bottom-color: var(--erro);
  background: #fdf1f0;
}
.campo.tem-erro .erro-msg { display: block; }

.duo { display: grid; gap: .9rem; }
@container form (min-width: 22rem) {
  .duo { grid-template-columns: 1fr 1fr; }
}

.consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .88rem;
  color: var(--grafite);
  line-height: 1.45;
}
.consent input {
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  accent-color: var(--verde-escuro);
  flex-shrink: 0;
}
.consent a {
  color: var(--verde-escuro);
  font-weight: 700;
  text-decoration: underline;
  display: inline-block;
  padding-block: .35rem;
}
.campo-consent { margin-block: 1.1rem 1.25rem; }
.campo-consent.tem-erro .consent { color: var(--erro); }
.campo-consent.tem-erro .erro-msg { display: block; }

.nota-seguranca {
  text-align: center;
  font-size: .82rem;
  color: var(--grafite);
  opacity: .85;
  margin-top: .8rem;
}

/* ── painéis de resultado ── */
.painel { display: none; text-align: center; padding: .5rem 0; }
.painel.ativo { display: block; }
.painel__icone {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgb(32 178 20 / .14);
  color: var(--verde-escuro);
}
.painel__icone svg { width: 36px; height: 36px; }
.painel h3 { color: var(--carvao); margin-bottom: .5rem; outline: none; }
.painel p { color: var(--grafite); margin-bottom: 1.2rem; }
.painel .btn + .btn { margin-top: .7rem; }

/* ─── 9. RODAPÉ ─────────────────────────────────────────────────
   Blocos separados por respiro, não uma linha só espremida. */
.rodape {
  background: var(--carvao);
  color: rgb(255 255 255 / .62);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  font-size: .88rem;
  line-height: 1.65;
}
.rodape__bloco + .rodape__bloco { margin-top: var(--e-lg); }
.rodape__forte {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--branco);
  letter-spacing: -.01em;
  margin-bottom: .2rem;
}
.rodape__partido { color: var(--amarelo); font-weight: 600; letter-spacing: .02em; }
.rodape__legal p { font-size: .86rem; color: rgb(255 255 255 / .55); }
.rodape__legal strong { color: rgb(255 255 255 / .8); font-weight: 600; }

.rodape__redes-titulo {
  font-family: var(--condensada);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .78);
  margin-bottom: .7rem;
}
.redes { display: flex; flex-wrap: wrap; gap: .6rem; }
.redes a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .2);
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.redes a:hover {
  background: var(--amarelo);
  color: var(--carvao);
  border-color: var(--amarelo);
  transform: translateY(-2px);
}
.redes svg { width: 21px; height: 21px; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--e-md);
  margin-top: var(--e-lg);
  padding-top: var(--e-md);
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .84rem;
}
.rodape__base a {
  color: rgb(255 255 255 / .75);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transicao);
}
.rodape__base a:hover { color: var(--amarelo); }

/* Não existe sistema de revelação ao rolar nesta página, e é
   deliberado: são duas dobras, movimento aqui é ruído, e animação
   que começa em opacity:0 é a forma mais comum de conteúdo sumir
   quando qualquer coisa falha. Nada nesta LP depende de JS para
   estar visível. */

/* ─── 10. LAYOUT: 640px ─────────────────────────────────────────── */
@media (min-width: 40rem) {
  .rodape__base { gap: .5rem var(--e-lg); }
}

/* ─── 11. LAYOUT: 1024px ────────────────────────────────────────
   Duas colunas de conteúdo, nunca três. A coluna do formulário tem
   largura em clamp() e a de texto absorve toda a variância, então a
   faixa de 1101 a 1350px que espremia o título deixa de existir. */
@media (min-width: 64rem) {
  .hero__grade {
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 34vw, 27rem);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: end;
  }
  .hero__texto { padding-bottom: clamp(1rem, 2vw, 2rem); }
  .hero__palco { inline-size: 100%; margin-inline: 0; align-self: end; }

  .cadastro__grade {
    grid-template-columns: minmax(0, 1fr) clamp(21rem, 38vw, 30rem);
    align-items: center;
  }
}

/* ─── 12. IMPRESSÃO ─────────────────────────────────────────────── */
@media print {
  .topbar, .aviso-config, body::after { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .cadastro, .rodape { background: #fff !important; color: #000 !important; }
}