/* ConectaAí — sistema de design neutro/premium
   Base: fundo branco, texto grafite, verde só em ação. Sem gradientes infantis.
   Fonte Inter via <link> no HTML (com preconnect), nunca @import bloqueante. */

:root {
  color-scheme: light;

  /* Superfícies */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-sunken: #f4f4f5;

  /* Texto (contraste >= 4.5:1 sobre as superfícies do tema) */
  --text: #18181b;
  --text-secondary: #52525b;
  --text-muted: #5f5f66;

  /* Bordas */
  --line: #e4e4e7;
  --line-strong: #d4d4d8;

  /* Ação */
  --accent: #16a34a;
  --accent-strong: #15803d;   /* fundo de botão: 5:1 com branco */
  --accent-hover: #166534;
  --accent-soft: #f0fdf4;
  --accent-border: #bbf7d0;
  --on-accent: #ffffff;

  /* Neutros escuros */
  --ink: #18181b;
  --ink-soft: #27272a;

  /* Destaque */
  --vip-bg: #fffbeb;
  --vip-border: #fcd34d;
  --vip-text: #92400e;

  /* Forma */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Elevação */
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-sm: 0 1px 3px rgba(24, 24, 27, .07), 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-md: 0 4px 12px rgba(24, 24, 27, .07), 0 2px 4px rgba(24, 24, 27, .04);
  --shadow-lg: 0 12px 32px rgba(24, 24, 27, .10), 0 4px 8px rgba(24, 24, 27, .04);

  /* Movimento */
  --t-fast: 120ms ease;
  --t: 180ms ease;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --container: 1200px;
  --gutter: 24px;
  --header-h: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  /* Impede que um texto longo estoure a tela em telas estreitas */
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.014em; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
::selection { background: var(--accent-border); color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: var(--r-sm); }

/* Respeita quem pediu menos animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
#bv-visitante-fechar{
  background-color: #dc2626;
  color: #fff;
}
#bv-visitante-fechar:hover{
  background-color: #7c0c0c;
}
/* Visível só para leitores de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

body.no-scroll { overflow: hidden; }

/* Pular para o conteúdo (teclado / leitor de tela) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px;
  background: var(--ink); color: #fff;
  border-radius: 0 0 var(--r-md) 0;
  font-size: 14px; font-weight: 500;
}
.skip-link:focus { left: 0; }

/* Barra de rolagem discreta e consistente */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ─── Header ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  width: min(var(--container), 100% - var(--gutter) * 2);
  height: var(--header-h);
  margin-inline: auto;
  display: flex; align-items: center; gap: 16px;
  /* Rede de segurança: em telas muito estreitas a linha pode quebrar */
  flex-wrap: wrap; row-gap: 8px;
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 17px; letter-spacing: -.02em;
  transition: opacity var(--t-fast);
  min-width: 0;
}
.logo:hover { opacity: .75; }
.logo-nome { font-weight: 800; letter-spacing: -.02em; }
.logo-nome span { color: var(--accent-strong, #16A34A); }
img.logo-badge {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}
/* A logo do DONO (enviada ou por URL) nasce sem o enfeite da casa: a
 * sombrinha desenha um quadradinho atrás da arte transparente — parecia
 * um fundo que não existia no arquivo sem fundo. E o contin recebe arte
 * de qualquer proporção no quadrado 30×30 sem esborrachar. */
img.logo-dona {
  box-shadow: none;
  object-fit: contain;
}
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ─── Botões ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--surface-sunken); border-color: var(--line-strong); }
.btn:active { transform: translateY(.5px); }
.btn-quiet {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--text-secondary);
  font-weight: 500;
}
.btn-quiet:hover { background: var(--surface-muted); border-color: var(--line-strong); color: var(--text); }
/* "Meus grupos" do topo: entra na família cinza dos botões neutros
 * (como o Detalhes dos cards) — pares com o verde do "Enviar grupo"
 * do lado, sem brigar por destaque. Hover funde um tom, como o Detalhes. */
.btn-nav-grupo { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--text-secondary); font-weight: 500; }
.btn-nav-grupo:hover { background: var(--line); border-color: #a1a1aa; color: var(--text); }
.btn-primary {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }
.btn-secondary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-sm { height: 34px; padding: 0 11px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* ─── Anúncios em carrossel ──────────────────────────────────────── */
.destaque-carousel {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.destaque-track { display: flex; transition: transform 520ms cubic-bezier(.4, 0, .2, 1); }
.destaque-slide {
  position: relative; isolation: isolate;
  min-width: 100%;
  min-height: 216px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  grid-template-areas: "conteudo arte";
  align-items: center;
  gap: 0 32px;
  color: #fff;
  overflow: hidden;
}
.destaque-slide[aria-hidden="true"] { pointer-events: none; }

/* Fundos por tema */
.destaque-slide[data-tema="boas-vindas"] { background: radial-gradient(120% 140% at 85% 8%, #15803d 0%, #14532d 45%, #052e16 100%); }
.destaque-slide[data-tema="descoberta"]  { background: radial-gradient(120% 140% at 85% 8%, #1d4ed8 0%, #1e3a8a 45%, #0c1a3d 100%); }
.destaque-slide[data-tema="revisao"]    { background: radial-gradient(120% 140% at 85% 8%, #0d9488 0%, #115e59 45%, #042f2e 100%); }
.destaque-slide[data-tema="gratis"]      { background: radial-gradient(120% 140% at 85% 8%, #7c3aed 0%, #4c1d95 45%, #1e1b4b 100%); }
.destaque-slide[data-tema="plano-ferro"] { background: radial-gradient(120% 140% at 85% 8%, #52525b 0%, #3f3f46 45%, #18181b 100%); }
.destaque-slide[data-tema="plano-ouro"]  { background: radial-gradient(120% 140% at 85% 8%, #d97706 0%, #b45309 45%, #78350f 100%); }
.destaque-slide[data-tema="plano-rubi"]  { background: radial-gradient(120% 140% at 85% 8%, #e11d48 0%, #9f1239 45%, #4c0519 100%); }

/* Textura sutil */
.destaque-slide::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1px, transparent 0);
  background-size: 20px 20px;
  mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
}

.destaque-conteudo { grid-area: conteudo; min-width: 0; }
.destaque-selo {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  min-height: 26px; padding: 4px 12px 4px 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.destaque-selo-icone { display: grid; place-items: center; width: 16px; height: 16px; }
.destaque-selo-icone svg { width: 16px; height: 16px; fill: currentColor; }
.destaque-titulo {
  margin: 14px 0 0;
  font-size: clamp(22px, 2.5vw, 31px);
  font-weight: 700; letter-spacing: -.028em; line-height: 1.14;
  max-width: 20ch;
}
.destaque-texto {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 15px; line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
/* Chips do anúncio ("marcas"): selos curtos de 1 a 3 palavras com um ✓,
 * resumindo o gancho do slide. Nascem do pedido de anúncios mais chamativos:
 * texto forte + ilustração própria + resumo visual. */
.destaque-marcas {
  margin: 14px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.destaque-marca {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.destaque-marca svg { width: 11px; height: 11px; flex: none; }
/* O botão "Ver categorias / Criar conta" do anúncio saiu: o slide já é um
   <a>, ou seja, o cartão inteiro é o link e o botão era botão repetido.
   O que sinaliza o clique agora é o próprio cartão: a seta do mouse vira
   mãozinha e a arte cresce no hover. Nada foi acrescentado no lugar. */
.destaque-slide { cursor: pointer; }

/* Ilustração */
.destaque-arte {
  grid-area: arte;
  display: grid; place-items: center;
  width: 164px; height: 164px; justify-self: center;
  border-radius: 46px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  transition: transform var(--t);
}
.destaque-slide:hover .destaque-arte { transform: scale(1.04); }
.destaque-arte svg { width: 72px; height: 72px; fill: rgba(255, 255, 255, .95); stroke: rgba(255, 255, 255, .95); stroke-width: 1.2; }
.destaque-arte img { width: 72px; height: 72px; object-fit: contain; }

/* A arte preenche a caixa (é a regra do .icone-url img, que vem depois e tem o
   mesmo peso do .destaque-arte img acima). Deixa explícito porque é isso que o
   dono pediu de volta: "ele deve ficar no alinhamento do carrossel, como
   antes" — a arte ocupa a caixa inteira e fica centrada nela.
   O que deixa a arte nítida NÃO é esta regra, é o tamanho do arquivo: com 256px
   do icons8, uma caixa de 70px (telefone) fica com sobra de folga. */
.destaque-arte .icone-url img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Ilustrações ricas do carrossel (arteHtml dos anúncios do site): 118px,
 * flutuando de leve. O tamanho da arte de imagem (tag acima) não vale aqui:
 * o SVG chega por atributo fill próprio, em camadas, e pede classe própria. */
.destaque-arte svg.arte-rica {
  width: 118px; height: 118px;
  animation: destaque-flutua 5.6s ease-in-out infinite;
}
@keyframes destaque-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .destaque-arte svg.arte-rica { animation: none; }
}

/* Bola de luz solta no canto do slide: profundidade a mais no degradê */
.destaque-slide::after {
  content: ""; position: absolute; z-index: -1;
  width: 300px; height: 300px; border-radius: 50%;
  right: -80px; bottom: -140px;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 72%);
}

/* Bolinhas de navegação: UMA por slide, no centro inferior. Clique pula
 * direto pro slide; a ativa acende. Nada de setas — pedido do dono, nos DOIS
 * carrosséis (site e planos). O ::before é a bolinha de 9px; o botão 18px só
 * existe pra alargar a zona de toque no celular. */
.destaque-dots {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 2px;
  pointer-events: none;
}
.destaque-dots button {
  pointer-events: auto;
  width: 18px; height: 18px; padding: 0; border: 0;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
}
.destaque-dots button::before {
  content: ""; display: block;
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  transition: background var(--t), transform var(--t);
}
.destaque-dots button.ativo::before { background: #fff; transform: scale(1.22); }
.destaque-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 840px) {
  /* Mantém a organização do PC: texto à esquerda, arte à direita */
  .destaque-slide {
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-areas: "conteudo arte";
    align-items: start;
    min-height: 0;
    padding: 20px 18px 44px;
    gap: 16px 12px;
  }
  /* Título e texto maisJustos: sem o botão, sobrou altura sobrando. */
  .destaque-titulo { margin-top: 10px; }
  .destaque-texto { margin-top: 6px; line-height: 1.55; }
  .destaque-conteudo { min-width: 0; }
  /* O slide usa `align-items: start` no celular (o texto tem que continuar
     colado no topo), mas isso colava a arte no alto: medido, o quadrado ficava
     com 18–20px ACIMA e 109–123px ABAIXO, enquanto no computador ele é
     centralizado (31px em cima e 31px embaixo). O dono: "o quadrado em que
     eles estão dentro, ele está posicionado pra cima; acho que é só o topo que
     precisa de espaçamento".
     Aqui só a arte é centralizada na vertical; o texto continua no topo. */
  .destaque-arte { width: 92px; height: 92px; border-radius: 26px; justify-self: end; align-self: center; }
  .destaque-arte svg { width: 42px; height: 42px; }
  /* A ilustração rica segue a caixa no celular: em 118px ela estourava a
   * caixa de 92px e vazava pra fora do slide (bug visto em telefone). A
   * flutuação também fica fora no celular — o toque já é movimento demais. */
  .destaque-arte svg.arte-rica { width: 66px; height: 66px; animation: none; }
  /* Chips mais justos no celular: colados no texto, sem a folga do PC */
  .destaque-marcas { margin-top: 10px; gap: 5px 6px; }
  .destaque-titulo { font-size: 21px; max-width: none; }
  .destaque-texto { font-size: 14px; }
}
@media (max-width: 380px) {
  .destaque-slide { grid-template-columns: minmax(0, 1fr) 72px; padding: 18px 14px 42px; gap: 12px 10px; }
  .destaque-arte { width: 72px; height: 72px; border-radius: 22px; }
  .destaque-arte svg { width: 32px; height: 32px; }
  .destaque-arte svg.arte-rica { width: 50px; height: 50px; }
  .destaque-titulo { font-size: 19px; }
}


/* Cartão do modal de detalhe */
.modal-cover { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 1px solid var(--line); }
.modal-title { margin-top: 18px; font-size: 18px; }
.modal-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
/* O corpo do modal de detalhe do grupo.
 *
 * Antes era só o título, a descrição solta e a lista de dados embaixo, tudo
 * com o mesmo peso — e a descrição, que é o texto que a pessoa escreveu para
 * o grupo ser encontrado, ficava parecendo um parágrafo qualquer. Agora ela
 * ganha um bloco próprio, com a faixa da cor da marca e um rótulo, e os
 * dados viram fichas separadas por divisória. */
.modal-corpo { display: block; }
.modal-bloco {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.modal-bloco-rotulo {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
}
.modal-bloco-texto {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.modal-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.modal-stats li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* Ordem do DOM: o RÓTULO (span) vem primeiro, em cima; o valor (b) embaixo.
 * Antes era o contrário — o valor vinha maior que o título do campo, e lida
 * de cima para baixo parecia invertido. */
.modal-stats span {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.modal-stats b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.modal-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }
.modal-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }
/* Confirmação: os nomes citados na mensagem ganham cor própria (paleta do painel) */
.modal-sub b.destaque-grupo { color: #15803d; }
.modal-sub b.destaque-impulso { color: #b45309; }
.modal-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--text-muted); }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-secondary); font-size: 18px; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover { background: var(--surface-sunken); color: var(--text); border-color: var(--line-strong); }
.modal { position: relative; }

/* ─── Seções ─────────────────────────────────────────────── */
.section { margin-top: 40px; }
/* Container: fundo um tom acima do da página, para separar visualmente */
.section-box {
  margin-top: 32px;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.section-box + .section-box,
.destaque-carousel + .section-box,
.section-box + .destaque-carousel { margin-top: 32px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.tabela-rolavel { overflow-x: auto; overflow-y: auto; max-height: 420px; margin-inline: -4px; padding-inline: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.tabela-rolavel > .db-tabela { min-width: 640px; }
@media (max-width: 520px) {
  table.mini { font-size: 13px; }
  table.mini th, table.mini td { padding: 8px 6px; }
  table.mini td:last-child { white-space: normal; }
  table.mini td:last-child .btn { white-space: nowrap; }
}
.section-head h2 { font-size: 19px; }
.section-head .sub { margin: 0; font-size: 14px; color: var(--text-secondary); }
/* Título e subtítulo centralizados */
.section-head-center { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.section-head-center h2 { font-size: 22px; }
.grupos-head-actions { position: absolute; right: 0; top: 0; }
.section-head-center { position: relative; }
@media (max-width: 520px) {
  .grupos-head-actions { position: static; margin: 8px auto 0; }
}

/* ─── Paginação ──────────────────────────────────────────── */
.paginacao {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: 28px;
}
.pag-btn {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-secondary);
  font-size: 14px; font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pag-btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-sunken); color: var(--text); }
.pag-btn.atual {
  background: var(--ink); border-color: var(--ink); color: #fff;
  font-weight: 600;
}
.pag-seta { font-size: 18px; line-height: 1; padding: 0 12px; }
.pag-btn:disabled { opacity: .35; cursor: not-allowed; }
.pag-reticencias { min-width: 24px; text-align: center; color: var(--text-muted); user-select: none; }
.resultado-texto { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ─── Categorias ─────────────────────────────────────────── */
/* Sem rolagem horizontal: sempre quebram em linhas */
.categories {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-bottom: 12px;
  width: 90%; margin-inline: auto;
}
/* A classe de esconder fica DEFINITIVAMENTE depois de todas as regras que
   dizem qual o `display` da pílula (ver a nota ao pé deste bloco). */
.cats-vazio {
  width: 90%; margin: 8px auto 0;
  text-align: center; font-size: 14px; color: var(--text-secondary);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pill:hover {
  border-color: var(--line-strong); color: var(--text);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.pill.active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }

/* No celular as categorias viram uma grade de 4 por linha (esboço do dono:
   4 em cima, 4 embaixo, e o botão "Ver mais"). Antes entravam 3 por linha e o
   bloco virava uma parede de fileiras para 19 categorias.
   O emoji continua aparecendo — ele encolhe em vez de sumir. Três ajustes
   fizeram 4 colunas caberem com o emoji junto:
   - a pílula rouba 8px de cada lado do cartão (width com folga + margem
     negativa) e aperta o espacamento para 2px;
   - o emoji vai a 11px e a letra a 10px. Medido com a fonte web carregada: é
     o menor tamanho em que "Criatividade", o nome mais longo do catálogo, cabe
     inteiro;
   - abaixo de 350px são 3 por linha: em 320px de tela, 4 colunas obrigariam a
     cortar nome, e nome cortado é pior do que uma coluna a menos. */
@media (max-width: 520px) {
  .categories {
    /* Sem a margem negativa de -12px.
     *
     * Ela existia para o bloco "sangrar" até as bordas do cartão, mas o bloco
     * de telas estreitas (max-width: 640px) tem `.categories { width: 100% }`
     * e vem MAIS ABAIXO no arquivo: com o mesmo peso, vencia e anulava o
     * `calc(100% + 24px)`. Sobrava só a margem, e o resultado era a grade
     * inteira 12px deslocada para a ESQUERDA, com um buraco de 12px na
     * direita — foi o que o dono viu ("coladas pra esquerda, com um espacinho
     * em branco na direita").
     *
     * Agora a grade tem exatamente a largura do conteúdo do cartão: alinha com
     * o título, com o subtítulo e com a barra de busca, igual aos dois lados. */
    width: 100%; margin-inline: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  }
  /* A REGRA que o dono pediu: 4 por linha e só as 2 primeiras linhas à mostra
     (8 categorias), com o "Ver mais" logo abaixo. Fixa, sem medir nada: da 9ª
     pílula em diante some. A classe .ver-todas é o que o "Ver mais" liga —
     sem ela, nada mais aparece. Vale para qualquer largura de celular,
     qualquer zoom e qualquer momento do carregamento. */
  .categories:not(.ver-todas) .pill:nth-child(n+9) { display: none; }
  /* `.categories .pill` e `.categories .pill .pill-icon` (e não só `.pill`):
     as regras base da pílula e do ícone estão DEPOIS desta media query e, com o
     mesmo peso, voltavam a mandar (13px e ícone de 16px). */
  .categories .pill {
    height: 30px; padding: 0 1px; gap: 1px;
    font-size: 10px; min-width: 0;
    overflow: hidden; white-space: nowrap;
    display: flex; align-items: center; justify-content: center;
  }
  /* Emoji encolhe para 9px (em vez de sumir). Medido: é o menor tamanho em que
     "Criatividade", o nome mais longo do catálogo, cabe inteiro numa coluna de
     4 a 360px de tela — com o texto em 10px. */
  .categories .pill .pill-icon {
    width: 9px; height: 9px; flex: 0 0 9px;
    font-size: 8px; border-radius: 3px;
  }
  .categories .pill .pill-icon .icone-url,
  .categories .pill .pill-icon img { width: 9px; height: 9px; }
  .categories .pill.active .pill-icon { background: rgba(255, 255, 255, .22); color: #fff; }
}
@media (max-width: 349px) {
  .categories { grid-template-columns: repeat(3, 1fr); }
  /* 3 colunas: 2 linhas = 6 categorias */
  .categories:not(.ver-todas) .pill:nth-child(n+7) { display: none; }
}
/* ---------------------------------------------
   ESCONDER A PÍLULA — precisa ficar AQUI, depois de tudo acima.
   ---------------------------------------------
   Wasca: a regra ficava muito acima, como `.pill.oculto` (peso 0,2,0), e a
   regra do celular `.categories .pill { display: flex }` (peso 0,2,0 também)
   vem DEPOIS no arquivo — com peso igual, vence a última. Ou seja: no telefone
   a pílula recebia a classe de "escondida" e continuava aparecendo. Foi
   exatamente o que o dono viu: as pílulas bonitinhas (o estilo do celular
   entrando) e as 19 na tela, com um "Ver mais" que não servia para nada.
   Aqui embaixo, `.categories .pill.oculto` (peso 0,3,0) ganha de qualquer
   regra de pílula, e não depende de estar depois nem antes. */
.categories .pill.oculto { display: none; }
/* Fade à direita sinaliza que a linha continua */
.cats-scroll { position: relative; }
.pill .pill-icon {
  width: 16px; height: 16px; flex: 0 0 16px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-size: 13px; line-height: 1;
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.pill[data-tone="green"]  .pill-icon { color: #15803d; background: #f0fdf4; }
.pill[data-tone="blue"]   .pill-icon { color: #1d4ed8; background: #eff6ff; }
.pill[data-tone="violet"] .pill-icon { color: #6d28d9; background: #f5f3ff; }
.pill[data-tone="amber"]  .pill-icon { color: #92400e; background: #fffbeb; }
.pill[data-tone="rose"]   .pill-icon { color: #be123c; background: #fff1f2; }
.pill[data-tone="cyan"]   .pill-icon { color: #0e7490; background: #ecfeff; }
.pill[data-tone="slate"]  .pill-icon { color: #475569; background: #f8fafc; }
/* Cor livre da categoria tem prioridade sobre o tom: o painel grava --cat-cor
   no botão quando a cor foi escolhida no editor. */
.pill[style*="--cat-cor"] .pill-icon { color: var(--cat-cor); background: color-mix(in srgb, var(--cat-cor) 12%, #fff); }
.pill[style*="--cat-cor"].active .pill-icon,
.pill[style*="--cat-cor"]:hover .pill-icon { color: #fff; background: var(--cat-cor); }
/* Ícone por URL: a imagem ocupa a caixa no lugar do glifo. */
.cat-icone-img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center;
  border-radius: inherit;
}
/* Painel: caixa do ícone e amostra da cor livre na lista. */
.cat-icone-box { display: grid; place-items: center; width: 28px; height: 28px; font-size: 19px; }
.cat-icone-box .cat-icone-img { width: 22px; height: 22px; }
.cat-cor-chip { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); vertical-align: -1px; }
.pill:hover .pill-icon { color: var(--text); }
.pill.active .pill-icon { color: #fff; background: var(--accent); }

/* Botão de expandir categorias: centralizado e com cor.
 * Regra da casa (btn-primary): nasce FORTE (accent-strong) e o hover escurece
 * um tom (accent-hover). Estava invertido: nascia lavado (accent-soft) e o
 * hover é que ligava a cor forte — o botão parecia desligado até passar o
 * mouse por cima. */
.cats-toggle { display: flex; justify-content: center; margin-top: 14px; }
.btn-cats-toggle {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-cats-toggle:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.cats-scroll { position: relative; }

/* ─── Busca ──────────────────────────────────────────────── */
.search {
  display: flex; align-items: center; gap: 10px;
  /* min-height, nunca height: com altura fixa, um botão maior (o aparelho pode
     aumentar o tamanho mínimo das letras) crescia para fora da barra e ficava
     por cima da borda arredondada — foi o que o dono viu no telefone. Com
     min-height + respiro vertical, a barra CRESCE junto e o botão nunca sai.
     O padding de 4px em cima e embaixo não muda o desenho em tamanho normal:
     botão de 34px + 8px = 42px, abaixo dos 46px da barra. */
  min-height: 46px;
  padding: 4px 6px 4px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t), box-shadow var(--t);
}
/* Dentro da seção de categorias: mesma largura dos pills */
.search-inline { width: 90%; margin: 0 auto 20px; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-icon { color: var(--text-muted); font-size: 16px; flex: 0 0 auto; }
.search input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; color: var(--text);
}
.search input::placeholder { color: var(--text-muted); }

/* ─── Barra de resultados ────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; }
.toolbar h2 { font-size: 17px; font-weight: 600; }
.count { font-size: 13px; color: var(--text-muted); }
.count-accent {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  color: #166534;
  font-size: 13px; font-weight: 500;
}
.toolbar .spacer { margin-left: auto; }

/* ─── Grade de grupos ────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
/* Título: DUAS linhas de altura fechada. Título de uma linha só não deixa
 * o card mais baixo que o do vizinho — a anatomia do card é fixa:
 * capa, 2 linhas de título, 3 linhas de texto, ações. */
.card h3 {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.35; min-height: 40.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Texto: TRÊS linhas de altura fechada (mesmo motivo do título). O corte
 * em 82 caracteres vem do JS (cortarDescricao, api.js); o que sobrar, a
 * régua de CSS corta também. Sem isto, card com descrição curta ficava
 * menor que o vizinho e a grade ficava torta. */
.card .desc {
  margin: 0; flex: 1;
  min-height: 63px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
}
.meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.meta-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; }
.meta-ok::before { content: "✓"; font-weight: 700; }
.badge-vip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--vip-bg); border: 1px solid var(--vip-border);
  color: var(--vip-text);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.badge-vip .star { color: #d97706; }

/* Capa do grupo: fundo tintado pela categoria, com padrão sutil */
.cover {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0);
  background-size: 12px 12px;
  opacity: .8;
}
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .75), transparent 60%);
}
.cover-emoji {
  position: relative; z-index: 1;
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .14));
  transition: transform var(--t);
  display: grid; place-items: center;
}
/* Ícone da categoria por URL dentro da capa do card. */
.cover-emoji .cat-icone-img { width: 46px; height: 46px; filter: none; }
.card:hover .cover-emoji { transform: scale(1.08) translateY(-2px); }
.cover-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.cover.tem-foto::before { display: none; }
.cover.tem-foto::after { z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent 55%); }
.cover.sem-foto { background: #f4f4f5 !important; }
.cover.sem-foto::before, .cover.sem-foto::after { display: none; }
.cover-sem-foto { position: relative; z-index: 1; color: #c4c4cc; display: grid; place-items: center; }
.cover-sem-foto svg { width: 46px; height: 46px; }

.cover[data-tone="green"]  { background: linear-gradient(160deg, #f0fdf4, #dcfce7); }
.cover[data-tone="blue"]   { background: linear-gradient(160deg, #eff6ff, #dbeafe); }
.cover[data-tone="violet"] { background: linear-gradient(160deg, #f5f3ff, #ede9fe); }
.cover[data-tone="amber"]  { background: linear-gradient(160deg, #fffbeb, #fef3c7); }
.cover[data-tone="rose"]   { background: linear-gradient(160deg, #fff1f2, #ffe4e6); }
.cover[data-tone="cyan"]   { background: linear-gradient(160deg, #ecfeff, #cffafe); }
.cover[data-tone="slate"]  { background: linear-gradient(160deg, #fafafa, #f1f5f9); }
.cover-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(15, 23, 42, .07);
  color: var(--text);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.cover-vip {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  height: 22px; padding: 0 9px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-full);
  background: var(--vip-bg); border: 1px solid var(--vip-border);
  color: var(--vip-text);
  font-size: 10.5px; font-weight: 600;
}
/* Arte do impulso no badge: a estrela some quando existe URL configurada.
   Quando não existe arte, ou quando a arte é um link morto (o iconePacote
   remove a <img> no onerror), a estrela reaparece sozinha — por isso o
   :has() em vez de decidir isso em JS.

   Os seletores são longos DE PROPÓSITO. O iconePacote embrulha a imagem em
   <span class="icone-url">, e .icone-url img { width:100%; height:100% } tem a
   MESMA especificidade (0,1,1) que um .cover-vip-arte img simples — só que
   aparece depois neste arquivo, então vencia e a arte estourava para 96px.
   Aqui precisa de 0,3,1 para ganhar de verdade. */
.cover-vip .cover-vip-arte { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 14px; height: 14px; }
.cover-vip .cover-vip-arte .icone-url { width: 14px; height: 14px; }
.cover-vip .cover-vip-arte .icone-url img { width: 14px; height: 14px; object-fit: contain; display: block; }
.cover-vip.tem-arte:has(.cover-vip-arte img) .star { display: none; }
.card-actions { display: flex; gap: 8px; margin-top: 2px; }
.btn-entrar { flex: 1; }
/* Detalhes e irmãos neutros do card: cinza da casa (sunken) ao NASCER —
 * antes ficava branco puro (surface), "sem cor" na vitrine; o hover funde
 * um tom (line) para dar resposta ao toque sem virar destaque verde. */
.btn-outline {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--text-secondary);
  font-weight: 500;
}
.btn-outline:hover { background: var(--line); border-color: #a1a1aa; color: var(--text); }
.btn-ghost { background: none; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); border-color: transparent; }

/* ─── Planos ─────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plans-grid { grid-template-columns: 1fr; } }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--text-muted);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.plan::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 160px; z-index: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--plan, #71717a) 14%, transparent), transparent 70%);
  opacity: .5;
  pointer-events: none;
}
.plan > * { position: relative; z-index: 1; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.plan.destaque { border-color: #fecdd3; box-shadow: var(--shadow-md); }

/* Selo de cada nível: cor e texto próprios */
.plan-selo {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.plan-name { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--plan, var(--text)); }
.plan-gem { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; color: var(--plan, var(--text-muted)); }
.plan-gem svg { width: 100%; height: 100%; fill: currentColor; }
.plan-gem img { width: 100%; height: 100%; object-fit: contain; }
/* Ícone via URL: a queda só aparece se a imagem quebrar */
.icone-url { display: grid; place-items: center; width: 100%; height: 100%; }
.icone-url img { width: 100%; height: 100%; object-fit: contain; }
.icone-url img + .icone-queda { display: none; }
/* Gema facetada: herda as cores do pacote via variáveis */
.gema { display: contents; }
.plan-desc { min-height: 38px; }
.plan-gratis {
  background: var(--accent-soft);
  color: var(--accent-hover);
  padding: 2px 10px; border-radius: var(--r-full);
  font-size: 18px;
}
.plan-features { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan-features li { position: relative; padding-left: 20px; font-size: 13px; color: var(--plan, var(--text-secondary)); line-height: 1.5; }
.plan-features li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--plan, var(--accent)); font-weight: 700; font-size: 12px;
}
.plan-cta {
  width: 100%; margin-top: auto;
  border-color: var(--plan);
  background: var(--plan);
  color: #fff;
  font-weight: 600;
}
.plan-cta:hover { border-color: var(--plan-hover, var(--plan)); background: var(--plan-hover, var(--plan)); color: #fff; }
.plan-desc { font-size: 13.5px; color: var(--text-secondary); margin: 0; min-height: 38px; }
.plan-price { margin-top: 6px; display: flex; align-items: baseline; gap: 5px; }
.plan-price b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.plan-price span { font-size: 13px; color: var(--text-muted); }
.plan-note { font-size: 13px; color: var(--text-secondary); margin-top: 16px; }
/* ─── Compra de tokens ───────────────────────────────── */
.compra-pix {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 14px 0 4px; padding: 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--surface-muted);
}
.compra-pix div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.compra-pix span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.compra-pix b { font-size: 15px; overflow-wrap: break-word; }
@media (max-width: 520px) { .compra-pix { grid-template-columns: 1fr; } }
/* Separação clara entre planos e FAQ */
.section-plans { padding-bottom: 30px; }

/* ─── Opções de impulso ───────────────────────────────────────
 * .impulso-opcao sobrou do modal de recusa do painel admin (o motivo da
 * recusa). A escolha de impulso do usuário é a página impulsionar.html, com
 * .impulso-card — lá não cabia tudo numa caixa de modal no celular. */
.field-rotulo { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.impulso-lista { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.impulso-secao { margin: 10px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.impulso-secao:first-child { margin-top: 0; }
.impulso-opcao {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.impulso-opcao:hover { border-color: var(--line-strong); }
.impulso-opcao:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); }
.impulso-opcao input[type="radio"] {
  width: 20px; height: 20px; flex: 0 0 auto; margin-left: auto;
  padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; font: inherit; color: inherit;
  accent-color: var(--accent-strong); cursor: pointer;
}
.impulso-opcao input[type="radio"]:disabled { cursor: not-allowed; }
.impulso-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.impulso-corpo b { font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
/* Arte do impulso no card de compra. Fica fora da regra que pinta todo span
   dentro de .impulso-corpo em cinza 13px, senão a imagem herda o estilo do texto. */
.impulso-arte { display: inline-flex; align-items: center; flex: 0 0 auto; font-size: 0; }
/* Mesmo motivo do badge: precisa de especificidade acima de .icone-url img
   (0,1,1), senão a regra genérica de .icone-url vence e a imagem estoura. */
.impulso-arte .icone-url { width: 18px; height: 18px; }
.impulso-arte .icone-url img { width: 18px; height: 18px; object-fit: contain; display: block; }
.impulso-corpo span { font-size: 13px; color: var(--text-secondary); }
.livre-tempo { font-variant-numeric: tabular-nums; }
.impulso-preco { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; font-weight: 700; color: var(--accent-hover); white-space: nowrap; }
.impulso-preco small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
/* Âncora de preço do impulso: linha discreta, não pode competir com o custo. */
.impulso-preco small:first-of-type { font-weight: 500; opacity: .9; white-space: nowrap; }
.impulso-opcao.sem-saldo { opacity: .55; }
.impulso-opcao.sem-saldo .impulso-preco { color: var(--text-muted); }
.impulso-saldo { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--accent-strong); }
.sem-saldo-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-muted); }
/* `:not()` aqui porque a regra geral alcança também a caixa do aviso, que é
 * linha (texto à esquerda, botão à direita) e não coluna. */
.sem-saldo-banner > div:not(.sem-saldo-detalhe) { display: flex; flex-direction: column; gap: 2px; }
/* Aviso de saldo zerado, na mesma caixa da linha do saldo. O `> div` é
   necessário: o texto e a explicação precisam ficar empilhados, e a regra
   geral (.sem-saldo-banner > div) só alcança o div de fora. */
.sem-saldo-detalhe { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.sem-saldo-detalhe > div { display: flex; flex-direction: column; gap: 2px; }
.sem-saldo-banner .impulso-saldo { margin: 0; }
.sem-saldo-banner b { font-size: 14px; }
.sem-saldo-banner span { font-size: 12.5px; color: var(--text-secondary); }
.sem-saldo-banner .btn { flex: 0 0 auto; }

/* No celular a opção de impulso do modal de recusa (painel admin) espremiava o
 * texto: o preço não encolhe (white-space: nowrap) e sobrava ~90px para o texto,
 * que quebrava a cada duas palavras. O texto passa a ocupar a linha inteira e o
 * botão de escolha fica logo abaixo, à direita. */
@media (max-width: 520px) {
  .impulso-opcao { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px; }
  .impulso-corpo { flex: 1 1 100%; }
  .impulso-preco { flex: 0 1 auto; margin-right: auto; align-items: flex-start; text-align: left; }
  .impulso-opcao input[type="radio"] { margin-left: 0; }
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--line); }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: color var(--t-fast);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--accent); }
details.faq .faq-sign {
  flex: 0 0 auto;
  color: var(--text-muted); font-size: 16px; font-weight: 400;
  transition: transform var(--t), color var(--t-fast);
}
details.faq[open] .faq-sign { transform: rotate(45deg); color: var(--accent); }
details.faq p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); max-width: 72ch; }
/* Link dentro da resposta: o site zera a cor e o sublinhado de todo <a>, então
 * sem esta regra os links que migraram do rodapé para o FAQ aparecem como
 * texto comum — e ninguém descobre que dá para clicar. */
details.faq a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
details.faq a:hover { color: var(--accent-hover); }

/* ─── Rodapé ─────────────────────────────────────────────── */
.site-footer { margin-top: 72px; border-top: 1px solid var(--line); background: var(--surface-muted); }
/* Rodapé sempre no pé da tela.
 * Numa página curta (notificações com poucas entradas, login, sobre) sobrava
 * uma faixa branca grande abaixo do crédito, porque o conteúdo não ocupava a
 * altura toda. Com a página como coluna flexível, o espaço que sobra fica no
 * meio (dentro de <main>) e o rodapé desce até o fim da tela. */
body:not(.auth):not(.admin) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.auth):not(.admin) > main { flex: 1 0 auto; }
/* Rodapé enxuto: o dono pediu para tirar as colunas de links do site inteiro e
   deixar só a linha de crédito. Os links migraram para as perguntas do FAQ. */
.site-footer-min {
  margin-top: 48px;
  background: transparent;
  border-top: 0;
}
.site-footer-min .footer-bottom { padding: 20px 0 26px; text-align: center; }

.footer-main {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: 52px 0 36px;
  display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px;
}
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; } }
/* No celular mantém colunas lado a lado como no PC: marca em cima, links em 2 colunas */
@media (max-width: 520px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 36px 0 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 44ch; }
  .footer-column a { font-size: 13.5px; padding: 5px 0; }
  /* São três colunas de links em duas: a terceira ficava sozinha na linha de
   * baixo, com um buraco do lado — lia-se como página de livro. Agora ela ocupa
   * a largura toda e os links correm em duas colunas dentro dela, que é o que o
   * rodapé do gruposwhats.app faz no celular. */
  .footer-column:last-child { grid-column: 1 / -1; columns: 2; column-gap: 18px; }
  .footer-column:last-child h3 { column-span: all; }
  .footer-column:last-child a { break-inside: avoid; }
}
.footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); max-width: 34ch; }

/* Ícones sociais */
.footer-social { display: flex; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.footer-social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-secondary);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.footer-social a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }

.footer-column h3 { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }
.footer-column a {
  display: block; width: 100%; text-align: left;
  padding: 6px 0;
  color: var(--text-secondary); font-size: 14px;
  transition: color var(--t-fast);
}
.footer-column a:hover { color: var(--accent); }
/* Ícone dentro de link do rodapé: 18px, traço fino, como os do menu. */
.footer-column a svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px; margin-right: 7px;
}
.footer-column a { display: flex; align-items: center; }

/* Rede de segurança: um SVG inline sem regra própria herdava o tamanho do
   contêiner e virava figura de 229px no meio da página. Qualquer ícone dentro
   de link ou botão passa a ter o tamanho de um texto, salvo se uma regra mais
   específica mandar de outro jeito (é o caso do menu, do QR e das artes). */
a > svg, button > svg, .btn > svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ─── Páginas de conteúdo (Sobre, Termos, Privacidade) ──────────
   Antes eram só <h1> e <p> soltos dentro de uma caixa: sem hierarquia, sem
   respiro, com cara de rascunho. Este bloco dá a elas a mesma linguagem
   visual do resto do site — cabeçalho largo, sumário lateral e uma coluna
   de leitura com medida de linha comfortable. */
.pag-doc-topo {
  padding: 44px 0 34px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.pag-doc-topo-inner { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.pag-doc-topo h1 { font-size: 32px; letter-spacing: -.02em; margin: 0 0 10px; }
.pag-doc-topo .sub { margin: 0; font-size: 16.5px; color: var(--text-secondary); max-width: 62ch; line-height: 1.6; }
.pag-doc-atualizado {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--text-muted);
}
.pag-doc-atualizado svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.pag-doc-grade {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px; align-items: start;
  padding: 44px 0 72px;
}
@media (max-width: 900px) { .pag-doc-grade { grid-template-columns: 1fr; gap: 30px; } }

/* Sumário lateral. O offset considera a barra superior, que é sticky: sem
   isso o sumário passava por baixo dela e ficava cortado. */
.pag-doc-nav { position: sticky; top: calc(var(--header-h) + 22px); }
.pag-doc-nav h2 {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 12px;
}
.pag-doc-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: docnav; }
.pag-doc-nav li { counter-increment: docnav; }
.pag-doc-nav a {
  display: flex; gap: 9px; align-items: baseline;
  padding: 7px 10px; margin-left: -10px;
  border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--text-secondary); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.pag-doc-nav a::before { content: counter(docnav) "."; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pag-doc-nav a:hover { background: var(--surface-sunken); color: var(--text); }
@media (max-width: 900px) {
  .pag-doc-nav { position: static; }
  .pag-doc-nav ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .pag-doc-nav a { background: var(--surface-muted); border: 1px solid var(--line); padding: 6px 11px; margin-left: 0; }
  .pag-doc-nav a::before { display: none; }
}

/* Coluna de leitura */
.pag-doc { max-width: 72ch; }
.pag-doc > * + * { margin-top: 18px; }
.pag-doc h2 {
  font-size: 20px; letter-spacing: -.01em;
  margin: 40px 0 0; padding-top: 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.pag-doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pag-doc h3 { font-size: 16px; margin: 26px 0 0; }
.pag-doc p { font-size: 15.5px; line-height: 1.72; color: var(--text-secondary); margin: 0; }
.pag-doc strong { color: var(--text); font-weight: 600; }
.pag-doc a { color: var(--accent-strong); font-weight: 500; }
.pag-doc ul, .pag-doc ol { margin: 0; padding-left: 22px; }
.pag-doc li { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 7px 0; }
.pag-doc li::marker { color: var(--text-muted); }

/* Caixa de destaque (aviso, resumo) */
.pag-doc-caixa {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--accent-border); border-left-width: 3px; border-radius: var(--r-md);
  background: var(--accent-soft);
}
.pag-doc-caixa svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--accent-strong); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pag-doc-caixa p { font-size: 14.5px; line-height: 1.65; color: var(--accent-strong); }
.pag-doc-caixa.neutro { border-color: var(--line); border-left-color: var(--line-strong); background: var(--surface-muted); }
.pag-doc-caixa.neutro svg { stroke: var(--text-muted); }
.pag-doc-caixa.neutro p { color: var(--text-secondary); }

/* Cartões dos pilares (página Sobre) */
.pag-pilares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px; margin: 0 0 40px;
}
.pag-pilar {
  padding: 20px 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.pag-pilar:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pag-pilar-icone {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-strong);
}
.pag-pilar-icone svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pag-pilar h3 { font-size: 15.5px; margin: 0 0 7px; }
.pag-pilar p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* Botão voltar, com seta e contorno (mesmo padrão do resto do site) */
.pag-voltar {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 26px; padding: 8px 15px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.pag-voltar svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pag-voltar:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }

/* Botão flutuante de WhatsApp (canto inferior direito).
   O número vem do painel admin; se não houver número, o botão não existe.
   A classe é própria (.wa-float) e não .btn-whatsapp: essa outra é o botão
   quadrado da página de compra, com estilo diferente. */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 45;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #075e54;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.wa-float:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wa-float svg { width: 30px; height: 30px; }
/* Link de WhatsApp no rodapé (coluna "ConectaAí") */
.footer-column a.wa-rodape { margin-top: 10px; }
@media (max-width: 560px) {
  .wa-float { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .wa-float svg { width: 27px; height: 27px; }
}

/* ─── Menu do perfil (header logado) ─────────────────────── */
.menu-perfil { position: relative; }
.menu-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.menu-btn:hover { background: var(--surface-sunken); }
.menu-btn svg { width: 19px; height: 19px; }
/* Ponto vermelho com contador no hambúrguer */
.menu-btn { position: relative; }
.menu-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: #dc2626; color: #fff;
  border: 2px solid var(--surface);
  font-size: 11px; font-weight: 700; line-height: 1;
}
/* Item de notificações com contador */
.menu-item-notif .menu-badge-item { margin-left: auto; }
.menu-badge-item {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: #dc2626; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* ─── Painel de avisos: o "vestir o aviso" ──────────────────── */
.av-estilo-campo .av-estilo-liga {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 13.5px;
}
.av-estilo-liga input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
#av-estilo-bloco {
  width: 100%;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #f8fafc;
}
.av-cor-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.av-cor-linha label, .av-cor-linha .av-cor-lab { font-size: 13px; font-weight: 500; margin: 0; }
.av-cor-linha input[type="color"] {
  width: 46px; height: 30px; padding: 2px 3px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; cursor: pointer;
}
.av-cor-linha select { max-width: 200px; }
/* Botão que abre a grade de ícones */
.av-icone-btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 10px; max-width: 180px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.av-icone-btn svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.av-icone-btn:hover { border-color: var(--line-strong); }
/* Grade de ícones: rolável COM barra de rolagem visível (pedido do dono).
 * 5 por fileira, 27 ícones, ~6 fileiras de folga. */
#av-icone-painel {
  max-height: 226px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 8px;
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
#av-icone-painel::-webkit-scrollbar { width: 9px; }
#av-icone-painel::-webkit-scrollbar-track { background: transparent; }
#av-icone-painel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid var(--surface); }
.av-icone-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.av-icone-iso {
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.av-icone-iso svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.av-icone-iso:hover { background: #f1f5f9; color: var(--text); }
.av-icone-iso.esc { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#av-preview { cursor: default; margin-top: 2px; }
.av-preview-vazio { flex: 1; }

/* ─── Filtros da página de notificações ─── */
.notif-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

/* Botão "Marcar todas": saiu do projeto (18/10/2026, a pedido do dono). Com ele
 * fora, estas regras todas disappearam: elas existiam só para fazer o botão
 * dividir a linha com os filtros no celular (o `.section-head` virava
 * `display: contents` e o título, o botão e os filtros eram ordenados com
 * `order`). Sem botão, o card volta ao layout normal de todo o resto do site. */

/* ─── Lista de notificações ──────────────────────────────── */
.notifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 15px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.notif-btn {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 0; border: none; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.notif:hover { border-color: var(--line-strong); }
/* A bolinha virou BOLHA DE ÍCONE (pedido do dono, 20/10/2026). O ponto
 * vermelho dizia só "não lida" e mentia no tom: "Impulso contratado" (verde,
 * boa notícia) aparecia com ponto vermelho de alarme. A bolha agora leva o
 * desenho do tipo — ✓ verde, ⓘ azul, ⚠ amarela, ✕ vermelha — e o próprio
 * "não lida" ficou por conta da bolha SOLIDA (fundo cheio, risco branco) e
 * do fundo chiaro do cartão. O admin ainda pode mandar ícone/cor próprios
 * (avisos "vestidos"): isso entra por estilo inline no cartão, e inline
 * ganha de qualquer regra daqui. */
.notif-icone {
  flex: 0 0 auto; width: 30px; height: 30px; margin-top: 2px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--notif-suave, #f1f5f9);
  border: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.notif-icone svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--notif-cor, #64748b);
}
/* Não lida, fallback (tipos fora do mapa abaixo): volta ao roxo/esmeralda de
 * "você ainda não leu" que o site já usava. Os tipos mapeados têm regra própria
 * logo em seguida e vencem esta por especificidade. */
.notif.nao-lida { background: var(--accent-soft); border-color: var(--accent-border); }
/* A lista rola dentro de si. Com muitas notificações a página virava um
 * scroll infinito, e o filtro ("Todas" / "Não lidas") saía de vista junto
 * com o título. Rolando só a lista, o cabeçalho fica. */
.notifs { max-height: 64vh; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
/* ─── A cor de cada tipo ───────────────────────────────────────
 * Borda COMPLETA na cor do tipo (o dono pediu: não só a esquerda), com borda
 * mais suave no cartão lido e borda cheia + fundo chiaro quando não lido.
 * Ordem mundial das cores: VERDE = boa notícia (sucesso); VERMELHO = erro
 * (hoje avisa conserto/banimento dura… nenhuma rota manda 'erro' ainda, mas o
 * visual já está pronto); AZUL = informação; AMARELO = atenção (moderação:
 * grupo removido/recusado, conta bloqueada, gemas retiradas). 'aviso' era
 * VERMELHO e comia o lugar do erro — agora fica no seu patamar de amarelo. */
.notif.tipo-sucesso { --notif-cor: #16a34a; --notif-suave: #f0fdf4; border-color: rgba(22, 163, 74, .55); }
.notif.tipo-erro { --notif-cor: #dc2626; --notif-suave: #fef2f2; border-color: rgba(220, 38, 38, .55); }
.notif.tipo-info { --notif-cor: #2563eb; --notif-suave: #eff6ff; border-color: rgba(37, 99, 235, .55); }
.notif.tipo-aviso { --notif-cor: #b45309; --notif-suave: #fef3c7; border-color: rgba(217, 119, 6, .55); }
.notif.tipo-boas-vindas { --notif-cor: #2563eb; --notif-suave: #eff6ff; border-color: rgba(37, 99, 235, .55); }
/* Não lida: borda vira cor cheia e o fundo puxa pro chiaro do tipo. */
.notif.nao-lida.tipo-sucesso { border-color: #16a34a; background: #f0fdf4; }
.notif.nao-lida.tipo-erro { border-color: #dc2626; background: #fef2f2; }
.notif.nao-lida.tipo-info { border-color: #2563eb; background: #eff6ff; }
.notif.nao-lida.tipo-aviso { border-color: #b45309; background: #fef3c7; }
.notif.nao-lida.tipo-boas-vindas { border-color: #2563eb; background: #eff6ff; }
/* Bolha sólida quando não lida: fundo cheio da cor e risco branco. Nos avisos
 * "vestidos" (cores do admin), o estilo inline do cartão ganha desta regra —
 * eles ficam de contorno, com a cor escolhida no risco e na borda. */
.notif.nao-lida .notif-icone { background: var(--notif-cor, #334155); border-color: transparent; }
.notif.nao-lida .notif-icone svg { color: #fff; }
.notif-texto { min-width: 0; }
.notif-texto b { display: block; font-size: 14.5px; }
.notif-texto p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.notif-quando { display: block; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.notif-expira { display: inline-block; margin-top: 6px; font-size: 11.5px; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--r-full); padding: 1px 8px; }
.notifs-acoes { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: 330px; min-height: 420px; max-height: calc(100vh - 96px);
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.menu-perfil-topo { display: flex; align-items: center; gap: 12px; position: relative; }
/* Identidade usa o espaço todo: o saldo de gemas fica no fim da linha, em fluxo
   (sem posição absoluta nem reserva fixa de pixels, que cortavam o nome). */
.menu-linha-topo { display: flex; align-items: flex-start; gap: 10px; }
.menu-linha-topo .menu-gemas { position: static; top: auto; right: auto; }
.menu-gemas svg { display: none; }
.menu-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: var(--accent-strong); color: #fff;
  font-size: 18px; font-weight: 700;
}
/* Foto/pronto dentro do círculo do avatar (menu do cliente e painel admin —
 * os dois usam a mesma classe). Fill total, cantos herdando o círculo. */
.menu-avatar img, .admin-avatar img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover; display: block;
}
.menu-identidade { min-width: 0; flex: 1 1 auto; }
.menu-identidade b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-identidade b > span { display: inline; white-space: nowrap; }
.menu-linha-topo { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.menu-nomes { flex: 1 1 auto; min-width: 0; }
.menu-nomes b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-nomes #menu-email { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-linha-topo .menu-gemas { flex: 0 0 auto; margin-left: auto; max-width: 132px; overflow: hidden; font-size: 12.5px; padding: 4px 4px 4px 10px; }
.menu-identidade span { display: block; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-identidade .menu-gemas { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 6px 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); max-width: 100%; font-size: 12.5px; color: var(--text); font-weight: 700; }
.menu-gemas svg { width: 16px; height: 16px; flex: 0 0 auto; fill: var(--accent-strong); }
.menu-gemas b { display: inline; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 88px; }
/* O "+" da pílula é a arte escolhida pelo dono (icons8 material-outlined,
 * testada 200 OK no CDN e cacheada 3,5 dias): neutra ao nascer — nada de
 * acento verde. Sem disco colorido: o ícone já fala por si no fundo branco
 * da pílula, e hover/foco ganha o sunken neutro da casa (#f4f4f5) — nunca
 * verde-claro que lava o contorno. Guarda color: var(--text) para NENHUMA
 * regra do site embrancar o estado de hover. PNG é caixa fechada e
 * simétrica — coisa que glifo de fonte nunca foi (o "+" da fonte desenhava
 * 1px fora do centro da bolinha, torto). */
.menu-gemas-mais { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; margin-left: 2px; border-radius: 999px; text-decoration: none; }
.menu-gemas-mais img { display: block; width: 24px; height: 24px; }
.menu-gemas-mais:hover, .menu-gemas-mais:focus-visible { background: var(--surface-sunken); color: var(--text); }
.menu-itens { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 10px;
  border: none; border-radius: var(--r-md);
  background: transparent; color: var(--text);
  font-size: 14px; font-weight: 500;
  transition: background var(--t-fast);
}
button.menu-item { cursor: pointer; font-family: inherit; }
.menu-item:hover { background: var(--surface-sunken); }
/* Ícones das opções */
.menu-item svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: var(--text-muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-fast);
}
.menu-item:hover svg { stroke: var(--text); }
.menu-sair svg { stroke: #dc2626; }
.menu-sair:hover svg { stroke: #991b1b; }
.menu-rodape { margin-top: auto; padding-top: 12px; }
.menu-sair { border-top: 1px solid var(--line); border-radius: 0; color: #b91c1c; font-weight: 600; padding-top: 14px; }
.menu-sair:hover { background: #fef2f2; }
/* No celular os botões somem do header e vivem dentro do menu */
@media (max-width: 560px) {
  .btn-nav-grupo { display: none; }
  .menu-dropdown { width: min(330px, calc(100vw - 32px)); min-height: 0; }
}

/* Zona de risco (excluir conta) */
.zona-risco { color: #b91c1c; }
.btn-perigo {
  background: #dc2626; border-color: #dc2626; color: #fff;
}
.btn-perigo:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.zona-perigo {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.zona-perigo h2 { font-size: 17px; color: #b91c1c; }
.lista-perigo { margin: 12px 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-perigo li { position: relative; padding-left: 22px; font-size: 14px; color: var(--text-secondary); }
.lista-perigo li::before { content: "!"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--r-full); background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 800; }

/* ─── Enviar grupo ───────────────────────────────────────── */
.narrow-wrap { max-width: 640px; margin-inline: auto; }
.field-rotulo { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.capa-box {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.capa-box:hover { border-color: var(--accent-strong); background: var(--accent-soft); }
.capa-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; text-align: center; }
.capa-vazia svg { width: 34px; height: 34px; color: var(--text-muted); }
.capa-vazia b { font-size: 15px; }
.capa-vazia span { font-size: 12.5px; color: var(--text-muted); }
.capa-acoes { display: flex; gap: 8px; margin-top: 10px; }

/* ─── Meus grupos ──────────────────────────────────────── */
/* O card de "meus grupos" é o MESMO card da vitrine — nem padding nem gap
 * próprios, para os dois cantos ficarem com o tamanho igual. */
.meu-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.meu-topo h3 { margin: 0; font-size: 15px; }
/* Selo do impulso no meu card: embaixo do botão Editar, que ocupa o topo
 * direito da capa (o mesmo lugar onde o selo nasce nos cards da vitrine). */
.card-meu .cover-vip { top: 44px; }
.status {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-sunken); color: var(--text-secondary);
}
.status-aprovado { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-hover); }
.status-analise { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.status-recusado { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
/* "Saiu da vitrine" não é recusa nem análise: é o grupo que ficou 10 dias sem
 * impulso. Cinza, para não parecer decisão da moderação. */
.status-inativo { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--text-secondary); }
/* Motivo no card de "meus grupos": ocupa o MESMO espaço da descrição
 * (63px de três linhas), não soma uma linha a mais — é isso que mantém o
 * card de recusado/excluído do mesmo tamanho do card normal. */
.recusa-motivo {
  margin: 0; min-height: 63px; overflow: hidden;
  padding: 8px 10px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
  color: #b91c1c; font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* O aviso de "saiu da vitrine" é informativo, não é uma recusa: cinza, não
 * vermelho. */
.recusa-motivo-neutro { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--text-secondary); }
.cover-editar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(15, 23, 42, .07);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: var(--text);
  transition: background var(--t-fast);
}
.cover-editar:hover { background: #fff; }

/* Direitos centralizados */
.footer-bottom {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: 20px 0 30px;
  border-top: 1px solid var(--line);
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 18px;
}
.footer-bottom p { margin: 0; font-size: 13px; color: var(--text-muted); }
.footer-bottom a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--accent-strong); }

/* ─── Modal, toast, vazio ────────────────────────────────── */
.backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: flex-start; justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(24, 24, 27, .45);
  backdrop-filter: blur(2px);
}
.backdrop.open { display: flex; }
/* `margin: auto` em vez de `align-items: center`: com o modal centralizado pelo
 * meio, uma janela alta jogava a caixa para o meio da tela (dava a impressão de
 * que o modal "caiu lá embaixo") e, se o modal fosse mais alto que a janela, o
 * topo saía para fora e não havia como rolar até ele. Com margem automática o
 * modal centraliza quando cabe e gruda no topo quando não cabe. */
.modal {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  margin: auto;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modal-in 160ms ease;
}
.modal.modal-largo { width: min(640px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal h3 { font-size: 18px; margin-bottom: 4px; }
.field { margin-top: 14px; }
/* Fora a barrinha do canto que deixa arrastar para aumentar/decrease a caixa
   de texto (pedido do dono, no site e no painel). Sem isso, no celular um
   arrasto sem querer dentro do campo mudava a altura e bagunçava o formulário.
   Vale para TODO textarea do projeto: os 6 do site e do painel estão
   cobertos por esta regra única (as telas do painel carregam este mesmo
   styles.css). Não vale para <input>: campo de uma linha não tem a barrinha. */
textarea { resize: none; }
.field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* Campos obrigatórios ganham asterisco automático (leitor de tela já anuncia via required) */
.field label:has(+ input:required)::after,
.field label:has(+ textarea:required)::after,
.field label:has(+ select:required)::after { content: " *"; color: #b91c1c; font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface);
  font-family: inherit; font-size: 14px; color: var(--text);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.row { display: flex; gap: 8px; margin-top: 18px; }
.row .btn { flex: 1; text-align: center; }
/* Em telas estreitas os botões do modal empilham em vez de espremer */
@media (max-width: 430px) {
  .row { flex-wrap: wrap; }
  .row .btn { flex: 1 1 100%; min-height: 44px; }
}
/* Texto de espera: some assim que o JS renderiza (replaceChildren) */
.fallback { color: var(--text-muted); font-size: 14px; margin: 0; padding: 12px 4px; }
.fallback code { font-size: 12.5px; }
#toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 120;
  transform: translate(-50%, 12px);
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--ink); color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  max-width: min(92vw, 480px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Tom de erro: os toasts do painel chamam toast(msg, "erro") — o tom existia
 * no pedido e não no desenho (o argumento morria na função). Vermelho da
 * casa (#991b1b etc.: mesma paleta do menu-sair). */
#toast.erro { background: #991b1b; }
.empty {
  padding: 52px 24px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-muted);
  color: var(--text-secondary);
}
.empty-mark { display: block; font-size: 26px; color: var(--text-muted); margin-bottom: 10px; }
.empty strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }
.empty p { margin: 0 0 16px; font-size: 14px; }

/* ─── Autenticação (login / register) ────────────────────── */
/* Botão de olho dentro do campo de senha */
.senha-wrap .ver-senha {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.senha-wrap .ver-senha:hover { color: var(--text); background: var(--surface-sunken); }
.senha-wrap .ver-senha svg { width: 19px; height: 19px; }
.auth-wrap {
  max-width: 480px;
  margin: auto;
}
.auth-wrap-login { max-width: 520px; }
@media (max-width: 760px) { .auth-wrap { margin-top: 16px; } }
/* Centraliza o card na altura da tela quando há espaço (sem cortar quando há scroll) */
body.auth { display: flex; flex-direction: column; min-height: 100vh; }
body.auth main { flex: 1; display: flex; flex-direction: column; padding: 48px 0; }
body.auth .auth-wrap { margin-top: auto; margin-bottom: auto; }
/* Telas de auth: header fixo no topo, faixa fina fixa na base,
   card centralizado no meio (conforme o desenho) */
body.auth { padding-bottom: 56px; }
body.auth .topbar { position: fixed; top: 0; left: 0; right: 0; }
body.auth main { padding-top: calc(var(--header-h) + 28px); }
.faixa-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 20px;
  min-height: 56px; padding: 10px 16px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
}
.faixa-fixa p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.faixa-fixa a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.faixa-fixa a:hover { color: var(--accent-strong); }
@media (max-width: 760px) { body.auth main { padding: calc(var(--header-h) + 20px) 0 28px; } }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
@media (max-width: 520px) { .auth-card { padding: 24px 18px; } }
.auth-logo { display: block; margin-bottom: 12px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.auth-card h2 { font-size: 22px; }
.auth-sub { margin: 6px 0 4px; font-size: 14.5px; color: var(--text-secondary); }
.auth-submit { width: 100%; margin-top: 18px; }
.auth-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.auth-alt { margin: 16px 0 0; font-size: 14px; color: var(--text-secondary); text-align: center; }
.auth-alt a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); text-align: center; }
/* Linha com dois campos lado a lado (nome + sobrenome) */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.field-row .field { margin-top: 0; }
@media (max-width: 430px) { .field-row { grid-template-columns: 1fr; } }
/* Rótulo de campo opcional */
.opcional { font-weight: 400; color: var(--text-muted); font-size: 12.5px; }

/* Campo com botão mostrar/ocultar */
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 46px; }

/* Aviso de retomada (rascunho).
 *
 * SEM USO HOJE: o dono pediu (18/10/2026) o aviso de "retomamos" fora de
 * todas as páginas, e não sobrou nenhum elemento com esta classe. O aviso
 * gigante de "Retomamos sua compra" também já era outra coisa. O rascunho
 * continua funcionando em todo lugar — os campos voltam preenchidos, só sem
 * a caixa verde na tela. Mantido o CSS (4 linhas) caso o dono volte atrás. */

/* Erros e dicas */
.campo-erro { margin: 6px 0 0; font-size: 13px; color: #b91c1c; }
/* Contador de caracteres (a descrição do grupo).
 * Fica quieto até a pessoa chegar perto do limite, e aí muda de cor: o
 * objetivo é ela ver o limite chegando, não um número vermelho na tela
 * desde o começo. */
.contador-texto {
  margin: 6px 0 0; text-align: right;
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.contador-texto.cheio { color: #b45309; font-weight: 600; }
.contador-texto.estourou { color: #b91c1c; font-weight: 700; }
.campo-aviso { margin: 6px 0 0; font-size: 13px; color: #92400e; }
.campo-dica { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.form-erro {
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: var(--r-md);
  background: #fef2f2; border: 1px solid #fecaca;
  color: #991b1b; font-size: 13.5px;
}
/* ── Notificação de conta bloqueada (modal do login) ───────────
 * Repaginada em 20/10/2026 (pedido do dono: "estiliza mais"). Antes era só
 * título + dois parágrafos: parecia aviso de sistema. Agora: faixa vermelha
 * no topo (o "stop" do bloqueio), escudo à cabeça, motivo num cartão com
 * barra âmbar (a cor de aviso da casa — o .form-erro fica com o vermelho de
 * erro) e o suporte como botão de WhatsApp. IDs/classes mantidos: o js/auth.js continua
 * preenchendo #banido-motivo por textContent e só revela o link quando o
 * número do WhatsApp está configurado; sem número, o botão fica hidden. */
#backdrop-banido .modal {
  padding-top: 0;
  border-top: 4px solid #dc2626;
}
.ban-cabeca {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 0 2px;
}
.ban-icono {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fee2e2; color: #b91c1c;
  border: 1px solid #fecaca;
}
.ban-icono svg { width: 22px; height: 22px; }
.ban-cabeca h3 { font-size: 19px; margin: 0; }
.ban-cabeca .modal-sub { margin: 2px 0 0; }
/* Motivo do bloqueio, cartão próprio (não é erro, é informação):
 * barra âmbar à esquerda imita "citação" — quem leu explicações de banimento
 * de outros sites reconhece o desenho na hora. O texto chega por textContent
 * do auth.js no formato Motivo: "…". */
.ban-motivo {
  margin: 16px 0 0; padding: 12px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
  border-radius: var(--r-md);
  color: #78350f; font-size: 14px; line-height: 1.55; font-weight: 500;
  text-align: left;
  overflow-wrap: anywhere;
}
/* Suporte como botão inteiro, não frase com link sublinhado: único caminho de
 * desbloqueio que a pessoa tem, merece ser o segundo destaque da caixa. Verde
 * da casa mais suave (bg de sucesso) para não brigar com a faixa vermelha. */
.banido-suporte { margin: 16px 0 0; }
.ban-suporte-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  border-radius: var(--r-lg);
  background: #dcfce7; border: 1px solid #bbf7d0;
  color: #14532d; font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.ban-suporte-btn:hover { background: #d1fae5; }
.ban-suporte-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.ban-suporte-btn svg { width: 18px; height: 18px; }
.field input[aria-invalid="true"] { border-color: #f87171; }

/* Bloco da força colado nos campos de senha */
.forca-bloco { margin-top: 12px; }
.forca-nivel-linha { margin: 0 0 6px; text-align: right; }
#forca-nivel { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
#forca-nivel[data-nivel="0"] { color: #b91c1c; }
#forca-nivel[data-nivel="1"] { color: #b45309; }
#forca-nivel[data-nivel="2"] { color: #15803d; }

/* Barra de força */
.forca { margin-top: 0; }
.forca-barra { height: 7px; border-radius: var(--r-full); background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; }
.forca-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: #dc2626; transition: width var(--t), background var(--t); }
.forca-barra span[data-nivel="1"] { background: #d97706; }
.forca-barra span[data-nivel="2"] { background: #15803d; }
.forca-ajuda { margin: 7px 0 0; font-size: 13px; color: var(--text-secondary); }

/* Termos */
.termos { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.termos input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent-strong); }
.termos a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }



/* ─── Conta ──────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab {
  padding: 9px 2px; margin-right: 18px;
  border: none; background: none;
  color: var(--text-secondary);
  font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.panel { display: none; } .panel.active { display: block; }
.panel-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.panel-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 16px; }
.subtitulo { font-size: 16px; font-weight: 600; margin: 32px 0 4px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr; } }
.kpi {
  padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.kpi b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.kpi span { font-size: 13px; color: var(--text-secondary); }
.notice {
  padding: 11px 14px; margin-bottom: 20px;
  border: 1px solid var(--vip-border); border-radius: var(--r-md);
  background: var(--vip-bg); color: var(--vip-text);
  font-size: 13.5px;
}
table.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mini th {
  text-align: left; padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
table.mini td { padding: 12px 8px; border-bottom: 1px solid var(--line); color: var(--text-secondary); }
table.mini td:first-child { color: var(--text); font-weight: 500; }

/* ═══ Refinamentos por tamanho de tela ═══════════════════════ */

/* Tablet: a arte do anúncio ocupa menos espaço.
 * Faixa starting em 841px de propósito: esta regra vem DEPOIS da do celular
 * (linha 288, que encolhe a arte para 92px) e, valendo até 0, vencia lá também.
 * Resultado no telefone: sobrava 162px para o texto, que quebrava a cada três
 * palavras, e o selo "DIVERSAS CATEGORIAS" ficava cortado. */
@media (min-width: 841px) and (max-width: 1000px) {
  .destaque-slide { grid-template-columns: minmax(0, 1fr) 160px; }
  .destaque-arte { width: 132px; height: 132px; border-radius: 38px; }
  .destaque-arte svg { width: 58px; height: 58px; }
  .destaque-arte svg.arte-rica { width: 88px; height: 88px; animation: none; }
}

/* Telas estreitas: respiro menor, containers mais justos */
/* Subtítulo vazio some inteiro (sem sobra de margem). O dono pediu fora o
   "N grupos · N com impulso pago no topo" da página de categoria: agora a
   quantidade aparece no paginador e no "Mostrando X–Y de Z" logo abaixo da
   grade. O elemento continua no HTML só para o aviso de categoria inválida. */
.section-head-center .sub:empty { display: none; }

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section-box { padding: 22px 16px; border-radius: var(--r-lg); }
  .section-box + .section-box, .destaque-carousel + .section-box, .section-box + .destaque-carousel { margin-top: 20px; }
  .destaque-carousel { margin-top: 16px; }
  .section { margin-top: 24px; }
  .search-inline, .categories, .cats-vazio { width: 100%; }
  /* A lupa era pequena demais no telefone: o desenho "⌕" ocupa só 9px de
     largura a 16px de fonte, ao lado de um campo de 15px — ficava uma
     pinta perto do texto. Aqui so no celular (o dono pediu), de 16px para 20px.
     A barra não muda de altura: o glifo passa a medir ~11x31px e o botão de
     34px continua mandando. */
  .search-icon { font-size: 20px; }
  .section-head-center h2 { font-size: 20px; }
  .card-body { padding: 13px 14px 15px; }
  .cover { aspect-ratio: 2 / 1; }
  .cover-emoji { font-size: 38px; }
  .plans-grid { gap: 12px; }
  .plan { padding: 18px 16px; }
  .plan-selo { margin-bottom: 10px; }
  .pag-btn { min-width: 44px; height: 44px; }
  .modal { padding: 20px 18px; border-radius: var(--r-lg); }
  .modal-stats { grid-template-columns: 1fr; gap: 10px; }
  .modal-stats li { flex-direction: row; align-items: baseline; gap: 8px; }
  .modal-stats b { font-size: 14px; }
  .site-footer { margin-top: 48px; }
  .footer-bottom { padding: 18px 0 26px; }
  .empty { padding: 36px 18px; }
  details.faq summary { padding: 14px 2px; font-size: 14.5px; }
  details.faq p { font-size: 14px; }
}

/* Telas muito estreitas: header compacto para não quebrar */
@media (max-width: 430px) {
  :root { --gutter: 12px; --header-h: 58px; }
  .logo { font-size: 15.5px; gap: 7px; }
  img.logo-badge { width: 27px; height: 27px; flex-basis: 27px; }
  .topbar-inner { gap: 10px; }
  .topbar nav { gap: 6px; }
  .btn-sm { height: 34px; padding: 0 10px; font-size: 12.5px; }
  /* A folga da esquerda é curta (7px contra 12px da direita) porque a pílula de
     categoria tem um ícone à esquerda e precisa de espaço para ele. Quem NÃO
     tem ícone — os botões de filtro ("Todas", "Não lidas" e os do painel) —
     ficava com o texto 2,5px fora do centro no telefone, e certinho no
     computador (lá a folga é igual dos dois lados). Medido: 2,5px de desvio a
     320–430px, 0px acima disso. */
  .pill:not(:has(.pill-icon)) { padding-left: 12px; }
  .pill { height: 36px; padding: 0 12px 0 7px; font-size: 13px; }
  .section-head { margin-bottom: 12px; }
  .search { min-height: 44px; padding: 3px 6px 3px 12px; }
  .search-inline .btn { padding: 0 12px; flex: 0 0 auto; }
  .cover { aspect-ratio: 16 / 9; }
  .card-actions .btn { flex: 1; }
}

/* Telas muito largas: evita linhas de texto cansativas */
@media (min-width: 1600px) {
  .destaque-titulo { font-size: 34px; }
  .destaque-texto { font-size: 16px; max-width: 52ch; }
}

/* Ponteiros grossos (celular): alvos de toque mais confortáveis */
@media (pointer: coarse) {
  .btn, .btn-sm, .pill, .pag-btn, .footer-social a, .btn-primary {
    min-height: 44px;
  }
  .field input, .field select, .field textarea { min-height: 44px; }
  .footer-column a { display: inline-block; padding: 10px 0; }
  .dot { width: 28px; height: 28px; }
  .pill { padding-right: 16px; }
}

/* Celular estreito (360px): o rodapé continua em duas colunas.
 * Antes esta regra botava 1 coluna E centralizava o texto, e era ela que
 * transformava o rodapé numa coluna de palavras empilhadas — uma embaixo da
 * outra, parecendo a página de um livro. Texto alinhado à esquerda e em duas
 * colunas lê-se como menu, não como texto corrido. */
@media (max-width: 380px) {
  .footer-main { gap: 24px 14px; }
  .footer-brand p { max-width: none; }
}

/* ═══ Página de impulso (impulsionar.html) ═══════════════════
   Virou página porque no celular o modal não cabia: cinco planos com
   descrição e preço deixavam o "Confirmar impulso" cortado no fundo da tela. */
.voltar { margin-bottom: 14px; }
.voltar-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none;
}
.voltar-link:hover { color: var(--accent); }

/* O grupo da vez, no topo: numa tela inteira dá para mostrar capa e nome
   sem aperto, e a pessoa não precisa lembrar qual grupo ia impulsionar. */
.impulso-alvo { display: flex; align-items: center; gap: 16px; }
.impulso-alvo .cover {
  width: 150px; flex: 0 0 150px;
  border-radius: var(--r-md); overflow: hidden;
}
.impulso-alvo-info { min-width: 0; }
.impulso-alvo-info h2 { margin: 0; font-size: 20px; }
.impulso-alvo-info .sub { margin: 4px 0 0; }

/* Grade de planos: 3 colunas no PC, 1 no celular. Cartão inteiro clicável.
   Formato enxuto do esboço do dono:
     [controle] impulso 12h              Disponível em: 00:00:00
               custo: 100 gemas
   Duas linhas, controle à esquerda, relógio à direita. */
.impulso-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1000px) { .impulso-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .impulso-grade { grid-template-columns: 1fr; } }
.impulso-grade .impulso-secao { grid-column: 1 / -1; margin-top: 6px; }

.impulso-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* O canto direito ocupa as DUAS linhas ("... acao" / "... acao"). Antes ele
     ficava só na primeira, e por isso alinha pelo centro da linha do nome —
     meio cartão, não o meio do cartão. O dono percebeu o botão colado no
     topo; a causa era o grid, não o botão. */
  grid-template-areas: "arte nome acao" "arte custo acao";
  align-items: center;
  column-gap: 10px; row-gap: 0;
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.impulso-card:hover { border-color: var(--line-strong); }
.impulso-card:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
/* Sem bolinha de seleção (pedido do dono): a marcação é a borda verde. O
   <input type="radio"> continua no DOM, invisível, porque é ele que guarda a
   escolha e o que o teclado e o leitor de tela usam — clicar no cartão inteiro
   continua escolhendo, porque o cartão é um <label>. */
.impulso-card:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.impulso-card.travado { cursor: not-allowed; }
.impulso-card.sem-saldo { opacity: .62; }
/* Ícone do serviço, à esquerda (o quadradinho do esboço). */
.impulso-arte {
  grid-area: arte;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 14px; line-height: 1;
  overflow: hidden;
}
.impulso-arte .icone-url { width: 26px; height: 26px; }
.impulso-arte .icone-url img { width: 26px; height: 26px; object-fit: contain; display: block; }
/* "impulso" em negrito como o identificador; só o identificador é verde. */
/* Nome do plano NA cor do serviço (`--plano`, que vem do catálogo) e a
   duração em VERDE. A regra é do dono: a cor diz qual serviço, o verde diz
   quanto tempo. Invertido (nome verde, horas cinza) os dois se perdiam — o
   nome perdia a identidade e as horas perdiam o destaque.
   Sem cor cadastrada, `var(--plano, ...)` cai no verde do site. */
.impulso-nome { grid-area: nome; font-size: 14.5px; font-weight: 700; color: var(--plano, var(--accent-strong)); }
.impulso-nome .impulso-duracao { margin-left: 6px; font-weight: 600; color: var(--accent-strong); }
/* Contador no canto direito, no meio do cartão (ver grid acima). */
.impulso-espera {
  grid-area: acao;
  align-self: center;
  font-size: 13px;
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.impulso-espera b { color: var(--text-secondary); font-weight: 600; }
.impulso-card.travado .impulso-espera b { color: var(--accent-strong); }
/* Custo na linha de baixo. A regra é do dono: a PALAVRA "custo:" é sempre
   preta (é um rótulo, não um dado) e quem muda de cor é a QUANTIDADE — verde
   quando o saldo cobre, vermelha quando não cabe. Antes era o contrário: a
   palavra verde e o número preto, e no vermelho as duas juntas, o que
   vermelho-ava um rótulo que não tem nada de errado. */
.impulso-custo { grid-area: custo; font-size: 12.5px; color: var(--text); }
.impulso-custo b { color: var(--accent-strong); font-weight: 700; }
.impulso-card.sem-saldo .impulso-custo b { color: #b91c1c; }

/* Botão "Escolher" no canto direito, centralizado na altura do cartão. É o
   que diz "este dá para contratar": só existe quando o saldo cobre, então o
   conjunto de botões na tela é a resposta viva à pergunta "o que eu consigo
   comprar agora?".
   Não é <button> de verdade: o cartão inteiro é um <label> do radio, e um
   botão dentro dele apertaria duas vezes (uma no label, outra no botão). Este
   span é só a aparência — quem recebe o clique é o label, e o radio faz o
   resto. O cursor de ponteiro e o :focus-visible do input preservam a
   sensação de botão e a navegação por teclado. */
.impulso-acao { grid-area: acao; align-self: center; display: flex; align-items: center; justify-content: flex-end; }
/* O rádio de verdade, à direita. É o <input type="radio"> do grupo: clicar
   nele marca, o teclado funciona, e o cartão inteiro (que é um <label>)
   também marca. A versão anterior era um botão desenhado à mão — não recebia
   o clique, era só aparência, e o dono percebeu que nada acontecia. */
.impulso-radio {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0;
  border: 2px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.impulso-radio:hover { border-color: var(--accent-strong); }
.impulso-radio:checked { border-color: var(--accent-strong); background: var(--accent-strong); box-shadow: inset 0 0 0 4px var(--surface); }
.impulso-radio:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Já é o impulso deste grupo: o botão some e o contador ocupa o lugar. Sem
   isso, quem já pagou acharia que precisava pagar de novo. */
.impulso-card.em-uso { border-color: var(--accent-strong); background: var(--accent-soft); }
.impulso-espera.em-uso b { color: var(--accent-strong); font-weight: 700; }

/* Plano em andamento tranca os outros. O cadeado fica no lugar do botão — e o
   número de quanto falta NÃO é repetido em cada cartão, porque ele já está no
   cartão do plano vigente, logo acima. */
.impulso-trancado { grid-area: acao; align-self: center; font-size: 13px; opacity: .5; }
/* A caixa do rodapé é fixa: o padding do fim da página precisa comportar a
   altura dela, senão o último cartão fica escondido atrás. */
#planos-impulso { padding-bottom: 116px; }
@media (max-width: 520px) { #planos-impulso { padding-bottom: 112px; } }
.impulso-card.esperando-plano .impulso-custo { color: var(--text-muted); }
.impulso-card.esperando-plano .impulso-custo b { color: var(--text-muted); }
/* O aviso do trancamento: por que a lista inteira está fechada. */
.impulso-trancado-aviso {
  grid-column: 1 / -1; margin: 0 0 4px;
  padding: 9px 12px;
  border: 1px solid var(--accent-border); border-radius: var(--r-md);
  background: var(--accent-soft);
  font-size: 12.5px; color: var(--accent-strong); font-weight: 600;
}

/* Tela muito estreita: o canto direito desce para a segunda linha para não
   apertar o nome. */
@media (max-width: 340px) {
  .impulso-card { grid-template-areas: "arte nome nome" "arte custo acao"; row-gap: 2px; }
}

/* ── "Como funciona": coluna própria, acima da lista ──
   Fica fora da caixa dos planos de propósito: dentro, ele parecia mais um
   cartão e sumia na leitura. Fundo num tom de aviso (âmbar) em vez do branco
   dos cartões — é informação, não opção. */
.impulso-regra {
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px solid #fcd34d;
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--r-md);
  background: #fffbeb;
}
.impulso-regra-titulo {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text);
}
.impulso-regra-lista { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.impulso-regra-lista li { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.impulso-regra-lista b { color: var(--text); font-weight: 600; }

/* ── Rodapé do impulso: caixa fixa no pé da tela ──
   Fica `position: fixed`, não no fim da lista. O dono pediu assim: a lista de
   planos é longa e o rodapé no fim exigia rolar até lá para ver o que estava
   marcado. Presa no pé, a escolha fica visível o tempo todo.

   Ela ganha `margin` nas laterais (não `left:0; right:0`) para ficar como a
   caixa do esboço — arredondada, com respiro da borda — em vez de uma tarja
   colada de ponta a ponta. */
.impulso-barra {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  /* Linha de cima (escolha), coluna de baixo (custo) e o botão AO LADO das
     duas — assim `align-items: center` centraliza o botão na caixa inteira.
     Antes o botão era irmão só da linha do custo, e ficava centralizado
     nela: por isso aparecia "pra baixo", colado no pé da caixa. */
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(24, 24, 27, .13);
}
.impulso-barra-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* Folga no fim da página para a caixa fixa não cobrir o último cartão. */
.impulso-barra-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Linha 1: "PLANO ESCOLHIDO:" + o nome, que é o dado que manda. O rótulo é
   menor que o nome, mas legível — a 11px ele virava um rabisco cinza que o
   dono lia como "ainda está pequeno". */
.impulso-barra-escolha { flex-wrap: wrap; }
.impulso-barra-rotulo { flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.impulso-barra-titulo { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mesma regra do cartão: o nome do serviço na cor dele, as horas em verde. */
.impulso-barra-servico { color: var(--plano, var(--accent-strong)); }
.impulso-barra-horas { color: var(--accent-strong); }

/* Mesma regra do cartão, outra vez: "Custo:" é rótulo e fica preto; quem muda
   de cor é a quantidade — verde se o saldo cobre, vermelha se não cobre. */
.impulso-barra-conta { gap: 6px; }
.impulso-barra-custo { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); }
.impulso-barra-custo b { color: var(--accent-strong); font-weight: 700; }
.impulso-barra-custo .rotulo { font-weight: 600; }
.impulso-barra-custo.falta b { color: #b91c1c; }
.impulso-barra .btn { flex: 0 0 auto; margin-left: auto; }

/* Nada selecionável (o grátis esperando): o rodapé some, mas o motivo precisa
   ficar na tela, na mesma posição — do contrário a página parece quebrada. */
.impulso-barra-vazia {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(24, 24, 27, .13);
}
.impulso-barra-vazia p { margin: 0; font-size: 13px; color: var(--text-secondary); }

@media (max-width: 520px) {
  .impulso-alvo { gap: 12px; }
  .impulso-alvo .cover { width: 104px; flex-basis: 104px; }
  .impulso-alvo-info h2 { font-size: 17px; }
  .impulso-barra { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 10px; }
  .impulso-barra-rotulo { font-size: 12px; }
  .impulso-barra-titulo { font-size: 15px; }
  .impulso-barra .btn { padding: 0 14px; font-size: 14px; }
  .impulso-barra-conta { gap: 10px; }
  .impulso-barra-vazia { padding: 12px 14px; }
  #planos-impulso { padding-bottom: 104px; }
}

/* Impressão: só o conteúdo */
@media print {
  .topbar, .destaque-carousel, .paginacao, .cats-toggle, .search, .site-footer, #toast, .backdrop, .passos { display: none !important; }
  .section-box { border: none; padding: 0; }
  body { background: #fff; }
}

/* ─── Compra de tokens (página própria) ─────────────────── */
.passos { list-style: none; margin: 4px 0 20px; padding: 0; display: flex; gap: 8px; }
/* flex: 1 1 0 + min-width: 0: sem o min-width, cada item para na largura da
 * palavra mais comprida ("Comprovante") e as três etapas saíam para fora do
 * card e da tela no celular. */
.passo { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-muted); color: var(--text-muted); font-size: 13px; font-weight: 600; }
.passo.atual { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); }
.passo-num { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12.5px; }
.passo.atual .passo-num { background: var(--accent-strong); color: var(--on-accent); }
.passo-num-inline { display: inline-grid; width: 22px; height: 22px; flex-basis: 22px; font-size: 12px; vertical-align: -6px; margin-right: 6px; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.migalha { margin: 0 0 12px; font-size: 13.5px; color: var(--text-muted); }
.migalha a { color: var(--accent-strong); font-weight: 600; }
.etiqueta { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-strong); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pedido-resumo { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: var(--surface-muted); margin-bottom: 8px; }
.pedido-resumo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pedido-resumo-topo b { font-size: 18px; }
.pedido-resumo > p { margin: 8px 0 0; color: var(--text-secondary); font-size: 14px; }
.pedido-resumo .plan-price { margin-top: 10px; }
.pix-quadro { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 6px 16px; background: var(--surface); }
.pix-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.pix-linha + .pix-linha { border-top: 1px solid var(--line); }
.pix-linha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pix-linha span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.pix-linha b { font-size: 15px; overflow-wrap: anywhere; }
/* Escolha de arquivo: caixa com ícone, status e botão. Antes o botão ficava
   espremido ao lado de um texto que só servia para dizer o tipo aceito
   ("JPG, PNG, WebP ou PDF de até 2 MB") — o dono pediu para tirar esse texto.
   A validação continua existindo: se o arquivo vier errado, o erro aparece
   embaixo, no momento de escolher. */
.arquivo-box {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.arquivo-icone {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-md);
  background: var(--surface-muted); color: var(--text-secondary);
}
.arquivo-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.arquivo-texto { flex: 1 1 auto; min-width: 0; }
.arquivo-texto b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.arquivo-box .btn-escolher { flex: 0 0 auto; }
.arquivo-box.com-erro { border-color: #fca5a5; }
.arquivo-nome { font-size: 13.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .arquivo-box { flex-wrap: wrap; gap: 12px; }
  .arquivo-box .btn-escolher { width: 100%; justify-content: center; }
}
/* Botões da etapa de comprovante: cada ação com sua cor, senão tudo fica
   cinza e o usuário não sabe o que é principal, o que volta e o que cancela. */
/* "Escolher arquivo" é um <label> dentro de .field, e .field label ganha
   no especificidade — por isso o display/margin/cor são redefinidos aqui. */
label.btn-escolher,
.btn-escolher {
  display: inline-flex;
  margin: 0;
  font-size: 14px;
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
  font-weight: 600;
}
.btn-escolher:hover { background: #dcfce7; border-color: var(--accent-strong); color: var(--accent-strong); }
.btn-remover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
  font-weight: 600;
}
.btn-remover:hover { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
/* Verde do WhatsApp (#075e54): branco em cima passa de 7:1 e não briga com o
   verde do site (#15803d), que é o do botão principal. */
.btn-whatsapp {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn-whatsapp:hover { background: #064e47; border-color: #064e47; color: #fff; }
/* Voltar também tem cor: o dono mandou os botões de voltar irem de
 * vermelho (presença forte, mas claramente DISTANTE do verde do botão
 * principal — verde segue significando "seguir", vermelho "voltar"). */
.btn-voltar,
.btn-voltar-lg {
  background: #dc2626;
  border: 1.5px solid #dc2626;
  color: #fff;
  font-weight: 600;
  gap: 9px;
}
.btn-voltar:hover,
.btn-voltar-lg:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.btn-voltar::before,
.btn-voltar-lg::before {
  content: "";
  width: 9px; height: 9px; flex: 0 0 auto;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
  transition: transform var(--t-fast);
}
.btn-voltar:hover::before,
.btn-voltar-lg:hover::before { transform: rotate(45deg) translate(3px, -3px); }
.btn-voltar-lg { height: 44px; padding: 0 20px; font-size: 15px; text-decoration: none; }
/* Cancelar é a saída da conversa: vermelho, para não parecer confirmação. */
.btn-cancelar {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
  font-weight: 600;
}
.btn-cancelar:hover { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.pedido-ok { border: 1px solid var(--accent-border); background: var(--accent-soft); border-radius: var(--r-lg); padding: 22px 18px; text-align: center; }
.pedido-ok b { font-size: 17px; color: var(--accent-strong); }
.pedido-ok p { color: var(--text-secondary); font-size: 14px; }
.anexo-previa { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-muted); }
.anexo-previa img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); }
.zap-cta { margin: 16px 0 4px; padding: 14px; border: 1px solid var(--accent-border); border-radius: var(--r-md); background: var(--surface); }
.zap-cta b { font-size: 15px; }
.cor-livre-rotulo { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--text-secondary); }
#cor-livre { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.btn-download { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-muted); text-decoration: none; color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
.btn-download:hover { border-color: var(--accent-strong); background: var(--accent-soft); }
.dl-icone { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: 20px; font-weight: 700; }
.dl-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-texto b { font-size: 15px; }
.dl-texto small { font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
/* Wizard de compra: linha do pedido, abas de método, QR e código */
.pedido-linha { margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); }
.metodo-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.metodo-aba { flex: 1; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-muted); color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.metodo-aba.ativa { border-color: var(--accent-strong); background: var(--accent-soft); color: var(--accent-strong); }
.qr-quadro { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 16px; background: var(--surface); text-align: center; }
.qr-quadro svg { width: 100%; max-width: 240px; height: auto; }
/* Boas-vindas na cara (index): faixa de destaque dispensável */
.boas-vindas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 18px; padding: 16px 18px; border: 1px solid var(--accent-border); border-radius: var(--r-lg); background: var(--accent-soft); }
.boas-vindas[hidden] { display: none; }
.boas-vindas-texto { display: flex; flex-direction: column; gap: 4px; }
.boas-vindas-texto b { font-size: 16px; }
.boas-vindas-texto span { font-size: 14px; color: var(--text-secondary); }
.boas-vindas-acoes { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 640px) { .boas-vindas { flex-direction: column; align-items: stretch; text-align: center; } .boas-vindas-acoes { justify-content: center; } }
.qr-quadro b { font-size: 18px; }
.qr-quadro span { font-size: 13px; color: var(--text-secondary); }
/* Faixa do produto na etapa de pagamento: a cor do plano acompanha a compra */
.pag-produto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); border: 2px solid var(--plan, #71717a); background: var(--plan, #71717a); margin: 0 0 12px; }
.pag-produto-gema { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .18); }
.pag-produto-gema svg { width: 30px; height: 30px; }
.pag-produto-gema img { width: 32px; height: 32px; object-fit: contain; }
.pag-produto-info { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.pag-produto-info b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pag-produto-info > span { font-size: 13px; opacity: .85; }
.pag-produto-valor { display: flex; flex-direction: column; text-align: right; flex: none; }
.pag-produto-valor b { font-size: 16px; white-space: nowrap; }
.pag-produto-valor > span { font-size: 11.5px; opacity: .8; }
#pix-codigo { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
#resumo-features { margin: 10px 0 0; }
@media (max-width: 520px) {
  /* Etapas da compra: número em cima do nome. Lado a lado, "3 Comprovante"
   * não cabia em 1/3 da tela e empurrava o cartão para fora. */
  .passos { gap: 6px; }
  .passo { flex-direction: column; gap: 4px; padding: 9px 4px; font-size: 11px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
  .pix-linha { align-items: flex-start; }
}
/* ────────────────────────────────────────────────────────────────
   PÁGINA DE ENVIO: seletor de categoria com ícone de verdade
   ────────────────────────────────────────────────────────────────
   As 18 categorias têm ícone de IMAGEM (icons8) e o <select> nativo
   não desenha imagem: as opções saíam com "●". Este botão + lista
   mostra o ícone (GZCats.iconeHTML), e o slug fica num input
   escondido — validação, rascunho e envio continuam iguais. */
.seletor { position: relative; }
.seletor-rotulo::after { content: " *"; color: #b91c1c; font-weight: 700; }
.seletor-botao {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.seletor-botao:hover { border-color: var(--line); }
.seletor-botao:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.seletor-icone { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; }
.seletor-icone .cat-icone-img,
.seletor-item-icone .cat-icone-img { width: 22px; height: 22px; }
.seletor-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor-botao:not(.tem-valor) .seletor-texto { color: var(--text-muted); }
.seletor-seta { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-muted); }
.seletor-lista {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px);
  /* 18 categorias: a lista rola. O teto acompanha a altura da tela para não
     abrir para fora no celular. */
  max-height: min(264px, 46vh); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.seletor-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text);
  font-family: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.seletor-item:hover, .seletor-item:focus-visible { background: var(--surface-muted); }
/* Listra entre um item e outro. Sem ela não dá para saber onde acaba um nome e
   começa o próximo — e no toque a pessoa erra em qual vai clicar (pedido do
   dono). Só no meio da lista: o primeiro não ganha listra em cima e o último
   não ganha em baixo. */
.seletor-item + .seletor-item { border-top: 1px solid var(--line); }
.seletor-item:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.seletor-item.atual { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.seletor-item-icone { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; }
.seletor-item-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aviso de "carregando" da capa. Sem ele, a pessoa via um retângulo vazio
   durante vários segundos e achava que a capa tinha falhado. */
.capa-carregando {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 13px; color: var(--text-secondary);
}
.spinner {
  flex: 0 0 auto; width: 14px; height: 14px;
  border: 2px solid var(--line-strong); border-top-color: var(--accent-strong);
  border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }

/* Página de envio: o formulário já é alto, e a folga de 48px do rodapé virava
   um vão morto logo abaixo do botão "Enviar". Aqui ela cai para 24px. */
body:has(#form-enviar) .site-footer { margin-top: 24px; }
/* -- Pagamento automático (Mercado Pago) na compra ---------------------
   O cartão do Mercado Pago é o ÚNICO caminho de pagamento: o manual
   (Pix do site + comprovante) saiu do ar a pedido do dono, 19/10/2026.
   Redesenho a pedido do dono: professional com provas de confiança
   (garantia, prazo, segurança não vê senha) — o QR + copia-e-cola
   continuam existindo um clique dentro do checkout do MP (botão Pix). */
.pag-mp-card {
  border: 1.5px solid var(--accent-border);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(24,24,27,.04);
}
.pag-mp-topo { display: flex; align-items: center; gap: 12px; }
.pag-mp-emblema { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
.pag-mp-emblema svg { width: 22px; height: 22px; }
.pag-mp-titulo b { display: block; font-size: 15.5px; }
.pag-mp-chamada { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
.pag-mp-provas { list-style: none; margin: 14px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pag-mp-provas li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.pag-mp-provas svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-strong); }
.pag-mp-cta { font-size: 16px; box-shadow: 0 12px 20px -12px rgba(22,163,74,.55); }
.pag-mp-cta:hover { box-shadow: 0 14px 24px -12px rgba(22,163,74,.6); }
.pag-mp-pe { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.pag-mp-pe svg { width: 12px; height: 12px; flex: 0 0 12px; }
.pedido-separador { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12.5px; margin: 14px 0 10px; }
.pedido-separador::before, .pedido-separador::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.mp-estado { font-weight: 600; color: var(--text-primary, var(--ink)); margin: 10px 0 0; }