/* ============================================================================
   Peneira — folha única para landing e painel.
   Sem framework, sem build, sem CDN: o que está aqui é o que o navegador recebe.

   Ordem do arquivo:
     1. tokens        2. reset/base      3. layout
     4. tipografia    5. componentes     6. landing
     7. painel        8. utilidades / movimento reduzido

   Mobile primeiro: o público (afiliado de grupo de WhatsApp) vive no celular.
   O desktop é que ganha colunas, não o contrário.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. tokens */

:root {
  color-scheme: light dark;

  /* Superfícies em escada: fundo → cartão → realce. Nunca usar cinza solto. */
  --fundo:        #f4f6f9;
  --fundo-2:      #ffffff;
  --fundo-3:      #eaeef4;
  --fundo-inverso:#0c1017;

  --borda:        #dde2ea;
  --borda-forte:  #c6cedb;

  --texto:        #101520;
  --texto-2:      #58637a;
  --texto-3:      #656e80;

  /* Verde = aprovado / marca. Vermelho = descartado. Âmbar = ressalva.
     Os três são semânticos: a página inteira lê o produto por essas cores. */
  --marca:        #12924f;
  --marca-forte:  #0d7540;
  --marca-clara:  #34d399;
  --marca-tenue:  #dcf6e7;
  --erro:         #c02a22;
  --erro-tenue:   #fdeceb;
  --alerta:       #96470a;
  --alerta-tenue: #fdf1dd;
  --info:         #2563eb;

  --grafico-linha: #2f7dd8;
  --grafico-area:  rgb(47 125 216 / 14%);
  --grafico-eixo:  #c6cedb;

  /* Escala tipográfica fluida (1.25 no mobile, ~1.33 no desktop). */
  --t-xs:  0.78rem;
  --t-sm:  0.875rem;
  --t-md:  1rem;
  --t-lg:  1.0625rem;
  --t-xl:  clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.15rem + 1.9vw, 2.25rem);
  --t-3xl: clamp(1.95rem, 1.3rem + 3.2vw, 3.25rem);

  /* Espaçamento em passo de 4. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px; --e-9: 104px;

  --raio-g: 20px;
  --raio:   14px;
  --raio-p: 10px;

  --sombra-1: 0 1px 2px rgb(16 21 32 / 5%);
  --sombra-2: 0 1px 2px rgb(16 21 32 / 6%), 0 10px 28px -12px rgb(16 21 32 / 18%);
  --sombra-3: 0 2px 4px rgb(16 21 32 / 6%), 0 24px 56px -20px rgb(16 21 32 / 26%);

  --largura: 1140px;
  --largura-texto: 68ch;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo:        #090b11;
    --fundo-2:      #11151e;
    --fundo-3:      #1a202c;
    --fundo-inverso:#f4f6f9;

    --borda:        #232a38;
    --borda-forte:  #333c4e;

    --texto:        #edf1f7;
    --texto-2:      #99a3b8;
    --texto-3:      #7c8698;

    --marca:        #34d399;
    --marca-forte:  #10b981;
    --marca-clara:  #6ee7b7;
    --marca-tenue:  #07281d;
    --erro:         #fb7185;
    --erro-tenue:   #2a1119;
    --alerta:       #fbbf24;
    --alerta-tenue: #2a1f08;
    --info:         #60a5fa;

    --grafico-linha: #7cb1f5;
    --grafico-area:  rgb(124 177 245 / 15%);
    --grafico-eixo:  #333c4e;

    --sombra-1: 0 1px 2px rgb(0 0 0 / 45%);
    --sombra-2: 0 1px 2px rgb(0 0 0 / 45%), 0 12px 32px -14px rgb(0 0 0 / 70%);
    --sombra-3: 0 2px 6px rgb(0 0 0 / 50%), 0 28px 64px -22px rgb(0 0 0 / 80%);
  }
}

/* ------------------------------------------------------------ 2. reset e base */

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

/* `hidden` é o que o JS usa para trocar de tela. Sem esta regra, qualquer
   classe com `display` (a porta é grid, a tela é block) vence o atributo e a
   tela escondida continua ocupando a página. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Foco visível e consistente em tudo que recebe teclado. Nunca remover. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Pular para o conteúdo: primeira parada do teclado em toda página. */
.pular {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--raio-p);
  background: var(--marca);
  color: #04120c;
  font-weight: 650;
  text-decoration: none;
  transition: top .15s ease;
}
.pular:focus { top: 12px; }

/* --------------------------------------------------------------- 3. layout */

.envolucro {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e-5);
}
.envolucro-estreito { max-width: 820px; }

section { padding-block: var(--e-8); }
@media (min-width: 900px) { section { padding-block: var(--e-9); } }

.faixa {
  background: var(--fundo-2);
  border-block: 1px solid var(--borda);
}

.secao-titulo {
  max-width: 720px;
  margin-bottom: var(--e-7);
}
.secao-titulo.centro { margin-inline: auto; text-align: center; }
.secao-titulo p {
  color: var(--texto-2);
  font-size: var(--t-lg);
  margin: 0;
  text-wrap: pretty;
}

.grade { display: grid; gap: var(--e-4); }
@media (min-width: 700px) { .grade-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grade-3 { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------- 4. tipografia */

h1, h2, h3, h4 {
  margin: 0 0 .4em;
  line-height: 1.14;
  letter-spacing: -.022em;
  font-weight: 720;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: -.032em; }
h2 { font-size: var(--t-2xl); letter-spacing: -.028em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: inherit; }
code, .mono { font-family: var(--fonte-mono); font-size: .92em; }

.olho {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca-forte);
  margin-bottom: var(--e-3);
}
.olho::before {
  content: "";
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
@media (prefers-color-scheme: dark) { .olho { color: var(--marca); } }

.legenda { font-size: var(--t-sm); color: var(--texto-2); margin: 0; }
.destaque { color: var(--marca-forte); }
@media (prefers-color-scheme: dark) { .destaque { color: var(--marca); } }

/* --------------------------------------------------------- 5. componentes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 13px 22px;
  min-height: 46px;               /* alvo de toque confortável no celular */
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: var(--t-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.botao:active { transform: translateY(1px); }
.botao-primario {
  /* Verde da marca puro daria 4,0:1 com texto branco — abaixo do mínimo de
     leitura. O tom forte passa em 5,8:1 e continua sendo a mesma cor. */
  background: var(--marca-forte);
  color: #ffffff;
  box-shadow: var(--sombra-2);
}
.botao-primario:hover { background: #0a6437; }
@media (prefers-color-scheme: dark) {
  .botao-primario { background: var(--marca-forte); color: #041711; }
  .botao-primario:hover { background: var(--marca); }
}
.botao-fantasma {
  background: var(--fundo-2);
  color: var(--texto);
  border-color: var(--borda-forte);
}
.botao-fantasma:hover { background: var(--fundo-3); }
.botao-p { padding: 9px 16px; min-height: 38px; font-size: var(--t-sm); }
.botao-largo { width: 100%; }
.botao[disabled], .botao[aria-busy="true"] { opacity: .55; cursor: progress; }

.cartao {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-5);
  box-shadow: var(--sombra-1);
}
.cartao h3 { margin-bottom: var(--e-2); }
.cartao > p:last-child { margin-bottom: 0; }
.cartao p { color: var(--texto-2); font-size: var(--t-sm); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  color: var(--texto-2);
  white-space: nowrap;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.etiqueta::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.etiqueta-ok    { background: var(--marca-tenue);  color: var(--marca-forte); }
.etiqueta-erro  { background: var(--erro-tenue);   color: var(--erro); }
.etiqueta-alerta{ background: var(--alerta-tenue); color: var(--alerta); }
@media (prefers-color-scheme: dark) { .etiqueta-ok { color: var(--marca); } }

/* --------------------------------------------------------------- topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid var(--borda);
}
.topo .envolucro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: 64px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 760;
  letter-spacing: -.03em;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--texto);
}
.marca-simbolo { width: 28px; height: 28px; flex: none; }
.topo nav { display: none; gap: var(--e-5); font-size: var(--t-sm); }
.topo nav a {
  color: var(--texto-2);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
}
.topo nav a:hover { color: var(--texto); border-bottom-color: var(--marca); }
@media (min-width: 940px) { .topo nav { display: flex; } }
.topo-acoes { display: flex; align-items: center; gap: var(--e-2); }
.topo-entrar { display: none; }
@media (min-width: 560px) { .topo-entrar { display: inline-flex; } }

/* ------------------------------------------------------------- 6. landing */

/* herói ------------------------------------------------------------------ */

.heroi {
  position: relative;
  padding-block: var(--e-7) var(--e-8);
  overflow: hidden;
}
/* Luz de fundo em gradiente: identidade sem imagem, sem custo de rede. */
.heroi::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 620px;
  background:
    radial-gradient(58% 55% at 22% 42%, color-mix(in srgb, var(--marca) 20%, transparent), transparent 70%),
    radial-gradient(46% 48% at 82% 20%, color-mix(in srgb, var(--info) 16%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.heroi .envolucro { position: relative; z-index: 1; }

.heroi-grade { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1000px) {
  .heroi-grade { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--e-7); }
}

.heroi h1 { margin-bottom: var(--e-4); }
.heroi .chamada {
  font-size: var(--t-lg);
  color: var(--texto-2);
  max-width: 56ch;
  margin-bottom: var(--e-5);
}
.heroi-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.heroi-nota {
  margin: var(--e-4) 0 0;
  font-size: var(--t-sm);
  color: var(--texto-2);
}
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
  padding: 0;
  list-style: none;
}

/* mock do painel no herói ------------------------------------------------ */

.mock {
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo-2);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  container-type: inline-size;
}
.mock-barra {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 10px var(--e-4);
  background: var(--fundo-3);
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-xs);
  color: var(--texto-2);
}
.mock-pontos { display: flex; gap: 5px; }
.mock-pontos i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--borda-forte);
}
.mock-corpo { padding: var(--e-4); display: grid; gap: var(--e-3); }

.veredito-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-2) var(--e-3);
  align-items: center;
  padding: var(--e-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
}
.veredito-linha.aprovada { border-left: 3px solid var(--marca); }
.veredito-linha.descartada { border-left: 3px solid var(--erro); }
.veredito-linha .titulo {
  font-size: var(--t-sm);
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.veredito-linha .detalhe {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  color: var(--texto-2);
  font-family: var(--fonte-mono);
}
@container (min-width: 380px) {
  .veredito-linha .detalhe { grid-column: 1; }
}

.mock-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--borda);
  background: var(--fundo-3);
  font-size: var(--t-xs);
  color: var(--texto-2);
}
.mock-rodape strong { color: var(--texto); }

/* rodada real (números) --------------------------------------------------- */

.numeros {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(3, 1fr);
}
.numero {
  padding: var(--e-4) 0;
}
.numero .valor {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3rem);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.numero .rotulo {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-2);
}

.achados { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
@media (min-width: 780px) { .achados { grid-template-columns: repeat(3, 1fr); } }
.achado {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
}
.achado .nome { font-weight: 620; font-size: var(--t-sm); }
.achado .precos { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.preco-riscado { text-decoration: line-through; color: var(--texto-3); font-size: var(--t-sm); }
.preco-atual { font-size: 1.35rem; font-weight: 740; letter-spacing: -.02em; }

/* prova de curadoria ------------------------------------------------------ */

.dossie {
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--fundo-2);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.dossie-cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-3);
}
.dossie-grade {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-5);
}
@media (min-width: 900px) {
  .dossie-grade { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}
.linha-preco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: baseline;
  margin-bottom: var(--e-3);
}
.linha-preco .preco-atual { font-size: 1.7rem; }

.grafico {
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
  padding: var(--e-3);
}
.grafico svg { width: 100%; height: auto; }
/* O SVG é estilizado por CSS, não por atributo: `var()` não vale em atributo
   de apresentação, e assim o gráfico troca de cor sozinho no tema escuro. */
.grafico .g-eixo { stroke: var(--grafico-eixo); stroke-width: 1; }
.grafico .g-rotulo { fill: var(--texto-3); font-size: 11px; font-family: var(--fonte-mono); }
.grafico .g-anunciado { stroke: var(--erro); stroke-width: 2; stroke-dasharray: 7 5; }
.grafico .g-nota { fill: var(--erro); font-size: 11px; font-weight: 700; font-family: var(--fonte-mono); }
.grafico .g-area { fill: var(--grafico-area); }
.grafico .g-linha {
  fill: none;
  stroke: var(--grafico-linha);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafico .g-hoje { fill: var(--erro); }

/* O SVG encolhe junto com a coluna; no celular o texto dentro dele precisa
   crescer em unidades de usuário para continuar legível. */
@media (max-width: 700px) {
  .grafico .g-rotulo { font-size: 15px; }
  .grafico .g-nota { font-size: 15px; }
}

.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-2);
}
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.chave { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.chave-real { background: var(--grafico-linha); }
.chave-anunciado { background: repeating-linear-gradient(90deg, var(--erro) 0 4px, transparent 4px 8px); }

.veredito {
  margin-top: var(--e-4);
  padding: var(--e-4);
  border-radius: var(--raio-p);
  background: var(--erro-tenue);
  border-left: 3px solid var(--erro);
  font-size: var(--t-sm);
}
.veredito .mono { color: var(--erro); font-weight: 700; }

.fatos { display: grid; gap: var(--e-3); margin: 0; }
.fatos > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px dashed var(--borda);
  font-size: var(--t-sm);
}
.fatos dt { color: var(--texto-2); }
.fatos dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* passos ------------------------------------------------------------------ */

.passo { position: relative; }
.passo-numero {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--marca-tenue);
  color: var(--marca-forte);
  font-weight: 780;
  margin-bottom: var(--e-3);
}
@media (prefers-color-scheme: dark) { .passo-numero { color: var(--marca); } }

/* fontes ------------------------------------------------------------------ */

.fontes { display: grid; gap: var(--e-3); }
@media (min-width: 640px) { .fontes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fontes { grid-template-columns: repeat(3, 1fr); } }
.fonte {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
}
.fonte .marcador {
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 760;
  font-size: var(--t-sm);
  background: var(--fundo-3);
  color: var(--texto-2);
}
.fonte strong { display: block; font-size: var(--t-sm); }
.fonte p { margin: 2px 0 0; font-size: var(--t-xs); color: var(--texto-2); }

/* preço ------------------------------------------------------------------- */

.planos { display: grid; gap: var(--e-5); }
@media (min-width: 860px) { .planos { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.plano { position: relative; display: grid; }
.plano-destaque {
  border-color: color-mix(in srgb, var(--marca) 55%, var(--borda));
  box-shadow: var(--sombra-2);
}
.plano-fita {
  position: absolute;
  top: -13px; left: var(--e-5);
  background: var(--marca-forte);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
}
@media (prefers-color-scheme: dark) { .plano-fita { color: #041711; } }
.plano-valor {
  font-size: 2.6rem;
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.plano-valor small {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-2);
  letter-spacing: 0;
}
.lista {
  list-style: none;
  padding: 0;
  margin: var(--e-4) 0 var(--e-5);
  display: grid;
  gap: var(--e-2);
  font-size: var(--t-sm);
}
.lista li { display: flex; gap: var(--e-2); align-items: flex-start; color: var(--texto-2); }
.lista li::before { content: "✓"; color: var(--marca-forte); font-weight: 800; flex: none; }
.lista li.ausente::before { content: "—"; color: var(--texto-3); }
@media (prefers-color-scheme: dark) { .lista li::before { color: var(--marca); } }
.plano .botao { margin-top: auto; }

/* FAQ --------------------------------------------------------------------- */

.duvida {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-3);
}
.duvida[open] { border-color: color-mix(in srgb, var(--marca) 42%, var(--borda)); }
.duvida summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  align-items: center;
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
  content: "+";
  color: var(--marca-forte);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
}
@media (prefers-color-scheme: dark) { .duvida summary::after { color: var(--marca); } }
.duvida[open] summary::after { content: "−"; }
.duvida p {
  margin: var(--e-3) 0 0;
  color: var(--texto-2);
  font-size: var(--t-sm);
  max-width: var(--largura-texto);
}

/* fecho e rodapé ---------------------------------------------------------- */

.fecho .cartao {
  padding: var(--e-8) var(--e-5);
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--marca) 12%, transparent), transparent 70%),
    var(--fundo-2);
}
.fecho p { max-width: 52ch; margin-inline: auto; color: var(--texto-2); font-size: var(--t-lg); }

.rodape {
  border-top: 1px solid var(--borda);
  padding-block: var(--e-6);
  color: var(--texto-2);
  font-size: var(--t-sm);
}
.rodape .envolucro { display: grid; gap: var(--e-3); }
@media (min-width: 760px) {
  .rodape .envolucro { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------------------------------------------------------------- 7. painel */

.painel { display: grid; grid-template-rows: auto auto 1fr; min-height: 100dvh; }

.abas {
  display: flex;
  gap: var(--e-1);
  overflow-x: auto;
  padding: var(--e-2) var(--e-5);
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-2);
  scrollbar-width: none;
  position: sticky;
  top: 64px;
  z-index: 20;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 620;
  padding: 9px 15px;
  min-height: 38px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.aba:hover { color: var(--texto); background: var(--fundo-3); }
.aba[aria-selected="true"] { background: var(--marca-tenue); color: var(--marca-forte); }
@media (prefers-color-scheme: dark) { .aba[aria-selected="true"] { color: var(--marca); } }

main.conteudo {
  padding: var(--e-6) var(--e-5) var(--e-8);
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
}
/* As telas do painel também são <section>, e herdariam o ritmo vertical de
   seção da landing — 104px de respiro dentro de um painel de trabalho. */
.tela { padding-block: 0; }
.tela > h2 { font-size: var(--t-xl); }
.tela > .sub {
  color: var(--texto-2);
  margin-bottom: var(--e-5);
  font-size: var(--t-sm);
  max-width: var(--largura-texto);
}
.bloco { margin-top: var(--e-7); }
.bloco h3 { margin-bottom: var(--e-1); }
.bloco > .sub { color: var(--texto-2); font-size: var(--t-sm); margin-bottom: var(--e-4); max-width: var(--largura-texto); }

.campo { display: grid; gap: 6px; margin-bottom: var(--e-4); }
.campo label { font-size: var(--t-sm); font-weight: 620; }
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: var(--t-sm);
  padding: 11px 13px;
  min-height: 44px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--fundo);
  color: var(--texto);
  width: 100%;
}
.campo input:disabled { color: var(--texto-2); background: var(--fundo-3); }
.campo .dica { font-size: var(--t-xs); color: var(--texto-2); }
/* Botão dentro de coluna de formulário não estica: fica do tamanho do rótulo. */
.campo > .botao { justify-self: start; }
.campo-linha { display: grid; gap: var(--e-4); }
@media (min-width: 620px) { .campo-linha { grid-template-columns: 1fr 1fr; } }
.campo-linha .campo { margin-bottom: 0; }
fieldset { border: 0; margin: 0 0 var(--e-4); padding: 0; }
fieldset legend { font-weight: 650; font-size: var(--t-sm); padding: 0; margin-bottom: var(--e-2); }

.interruptor {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-size: var(--t-sm);
}
.interruptor input { width: 20px; height: 20px; flex: none; accent-color: var(--marca); }

.metricas {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 820px) { .metricas { grid-template-columns: repeat(4, 1fr); } }
.metrica {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
}
.metrica .rotulo {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-2);
  font-weight: 650;
}
.metrica .valor {
  font-size: 1.9rem;
  font-weight: 760;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.metrica .nota { font-size: var(--t-xs); color: var(--texto-2); }

/* Quadro de descartes: barra proporcional dentro da própria linha. */
.motivos { display: grid; gap: var(--e-3); margin: 0; }
.motivo { display: grid; gap: 6px; }
.motivo .cabeca {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-sm);
}
.motivo .cabeca strong { font-variant-numeric: tabular-nums; }
.barra {
  height: 8px;
  border-radius: 999px;
  background: var(--fundo-3);
  overflow: hidden;
}
.barra > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--erro);
  opacity: .75;
}

/* Série diária desenhada em SVG pelo app.js — cor por CSS, igual ao gráfico
   da landing, para acompanhar o tema sem o JS saber de cor nenhuma. */
#grafico-serie svg { width: 100%; height: auto; }
#grafico-serie .s-base { stroke: var(--borda); stroke-width: 1; }
#grafico-serie .s-publicada { fill: var(--marca); }
#grafico-serie .s-descartada { fill: var(--erro); opacity: .55; }
#grafico-serie .s-rotulo { fill: var(--texto-3); font-size: 10px; font-family: var(--fonte-mono); }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th, .tabela td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela th {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-2);
  font-weight: 700;
  white-space: nowrap;
}
.tabela td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* No celular a tabela rola dentro do próprio quadro em vez de espremer as
   colunas até a palavra quebrar letra a letra. */
.rolagem .tabela { min-width: 560px; }
.rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
}

.itens { display: grid; gap: var(--e-2); }
.item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
  align-items: center;
  padding: var(--e-4);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.item .info { min-width: 0; flex: 1 1 220px; }
.item .info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .info span { font-size: var(--t-xs); color: var(--texto-2); overflow-wrap: anywhere; }
.item .acoes { display: flex; gap: var(--e-2); align-items: center; }

.qr-area { display: grid; gap: var(--e-4); justify-items: center; text-align: center; }
.qr-area img {
  width: min(260px, 70vw);
  border-radius: var(--raio-p);
  background: #fff;
  padding: 10px;
}

.vazio { color: var(--texto-2); font-size: var(--t-sm); padding: var(--e-5); text-align: center; }

.aviso {
  padding: 12px 14px;
  border-radius: var(--raio-p);
  font-size: var(--t-sm);
  margin-bottom: var(--e-4);
  border-left: 3px solid var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
}
.aviso-erro { border-color: var(--erro); background: var(--erro-tenue); }
.aviso-ok { border-color: var(--marca); background: var(--marca-tenue); }

/* porta de entrada (login/cadastro) */
.porta { display: grid; place-items: center; min-height: 100dvh; padding: var(--e-5); }
.porta-caixa { width: 100%; max-width: 430px; }
.porta .cartao { padding: var(--e-6); }
.porta .marca { margin-bottom: var(--e-5); }
.porta .alternar { text-align: center; font-size: var(--t-sm); color: var(--texto-2); margin: var(--e-4) 0 0; }
.porta .alternar button {
  background: 0; border: 0; color: var(--marca-forte);
  font: inherit; font-weight: 650; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (prefers-color-scheme: dark) { .porta .alternar button { color: var(--marca); } }
.porta-prova {
  margin-top: var(--e-4);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--texto-2);
}

/* ------------------------------------------------- 8. utilidades e movimento */

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.centro { text-align: center; }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }

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


/* Prévia da mensagem: precisa mostrar as quebras de linha exatamente como o
   WhatsApp vai mostrar — daí `pre-wrap`, e não um parágrafo comum. */
.previa-mensagem {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid rgba(127, 127, 127, .25);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 14px;
}