/* =============================================================================
   Link da Promo — sistema visual
   -----------------------------------------------------------------------------
   Um arquivo, sem framework e sem build: o app é servido como arquivo estático.

   O dono escolheu o padrão da categoria, executado no acabamento mais alto, com o
   Asaas como régua — cor de marca que ocupa regiões inteiras, clareza imediata,
   ação óbvia, confiança de quem mexe com dinheiro.

   Duas regras que decidem quase tudo aqui:

   1. A MARCA É AZUL-PETRÓLEO E O VERDE É ESTADO. Se a identidade fosse verde, o
      cliente não conseguiria distinguir "é da marca" de "está funcionando" — e o
      estado do chip dele é a informação mais importante da tela.
   2. ESCALA FIXA DE NÚMEROS: dinheiro é sempre o maior, contagem o segundo,
      horário o terceiro. Igual em toda tela, pra ler virar memória muscular.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Poppins:wght@700&family=Azeret+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Marca. Ocupa regiões inteiras: a lateral, a metade da tela de entrada, o topo
     da página de vendas. Acento tímido é o padrão feito pela metade. */
  --marca-900: #07283D;
  --marca-800: #093953;
  --marca-700: #0B4A6F;
  --marca-600: #0F6292;   /* toda ação primária */
  --marca-500: #1478AD;
  --marca-200: #BCDCEC;
  --marca-100: #E3F0F7;

  /* Estado, separado da marca de propósito — e nomeado pelo PAPEL, não pelo brilho.
     Numerar por brilho (700 = mais escuro) inverte no tema escuro e produz texto
     escuro sobre fundo escuro; três defeitos assim apareceram antes desta troca.
     `-fundo` é a superfície tingida, `-texto` é o que se lê EM CIMA dela, e
     `-forte` é o preenchimento sólido. */
  --ok-fundo:      #E2F3EA;  --ok-texto:      #10613A;  --ok-forte:      #157F4B;
  --atencao-fundo: #FBF0DC;  --atencao-texto: #8A5800;  --atencao-forte: #A66A00;
  --perigo-fundo:  #FBE9E7;  --perigo-texto:  #8F1E18;  --perigo-forte:  #B3261E;
  --marca-fundo:   #E3F0F7;  --marca-texto:   #0B4A6F;

  /* Neutros com viés frio levíssimo, da mesma família do azul-petróleo. */
  --tinta-900: #0B1620;
  --tinta-700: #2B3D4A;
  --tinta-500: #5A6B77;   /* piso de 4.5:1 sobre branco — vale pra texto e placeholder */
  --tinta-400: #8496A1;   /* só ornamento e ícone, nunca texto corrido */
  --tinta-300: #C7D2D9;
  --tinta-200: #E1E8EC;
  --tinta-100: #EEF3F5;

  --fundo:        #F4F7F9;
  --superficie:   #FFFFFF;
  --superficie-2: #F9FBFC;
  --marca-fraca:  rgba(255, 255, 255, .62);  /* texto secundário SOBRE a marca */
  --marca-linha:  rgba(255, 255, 255, .13);

  /* A ação primária tem tokens próprios porque o HOVER MUDA DE DIREÇÃO entre os
     temas: no claro ele escurece, no escuro ele clareia. Derivar o hover de
     `--marca-700` deixava o botão ilegível no escuro — texto escuro sobre fundo
     escuro, 1.4:1, achado pelo detector antes de qualquer pessoa ver. */
  --acao:       #0F6292;
  --acao-hover: #0B4A6F;
  --acao-ativo: #093953;
  --sobre-acao: #FFFFFF;

  /* Sombra com deslocamento e desfoque — halo colorido sem offset é enfeite. */
  /* A conversa da prévia. Verde do WhatsApp porque é o lugar onde a mensagem cai —
     sem ele a prévia vira "um texto num cartão" e não ensina nada sobre o resultado. */
  --conversa:     #E7E0D8;
  --balao:        #D9FDD3;
  --balao-texto:  #10231C;

  --gradiente-marca: linear-gradient(135deg, #7C3AED 0%, #E11D74 55%, #F97316 100%);

  --sombra-1: 0 1px 2px rgba(11, 22, 32, .06), 0 1px 3px rgba(11, 22, 32, .04);
  --sombra-2: 0 2px 4px rgba(11, 22, 32, .05), 0 8px 16px -6px rgba(11, 22, 32, .10);
  --sombra-3: 0 4px 8px rgba(11, 22, 32, .07), 0 18px 36px -12px rgba(11, 22, 32, .16);

  /* `--r-xs` é o raio INTERNO: algo de 8px por fora pede menos por dentro, senão o
     canto interno parece mais quadrado que o externo. Sem esse degrau, o código
     inventava 6px solto — escala com exceção não é escala. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-full: 999px;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 40px;
  --e-9: 48px; --e-10: 64px;

  --t-xs: .75rem;  --t-sm: .8125rem; --t-base: .9375rem; --t-md: 1rem;
  --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem;  --t-3xl: 2.125rem;

  --fonte: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fonte-dado: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --lateral: 248px;
  --rapido: 120ms cubic-bezier(.4, 0, 1, 1);
  --calmo:  160ms cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* O cliente abre isto no celular sob sol e no computador à noite. O claro é o
   padrão porque a leitura sob sol manda; o escuro existe porque a noite também. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* A barra da marca era mais ESCURA que a página: lia como preto, não como
       azul-petróleo, e a promessa de "ocupa regiões inteiras" morria justo no tema
       que o dono abre. Agora o campo da marca é claramente azul e claramente acima
       do fundo, e o fundo desceu pra as superfícies subirem. */
    --marca-900: #0B3A55;
    --marca-800: #0E4767;
    --marca-700: #115B80;
    --marca-600: #3BA7E0;
    --marca-500: #59B8E8;
    --marca-200: #16506F;
    --marca-100: #0C2F44;

    --ok-fundo:      #0D2E20;  --ok-texto:      #7FD3A6;  --ok-forte:      #34A76A;
    --atencao-fundo: #33260B;  --atencao-texto: #E5B765;  --atencao-forte: #C88A18;
    --perigo-fundo:  #34120F;  --perigo-texto:  #F2A79E;  --perigo-forte:  #D9483E;
    --marca-fundo:   #0C3247;  --marca-texto:   #9AD2EF;

    --tinta-900: #EAF1F5;
    --tinta-700: #C3D2DB;
    --tinta-500: #93A6B3;
    --tinta-400: #6C818F;
    --tinta-300: #33485A;
    --tinta-200: #22333F;
    --tinta-100: #1A2833;

    --fundo:        #06111A;
    --superficie:   #0F2231;
    --superficie-2: #14293A;
    --marca-fraca:  rgba(234, 241, 245, .68);
    --marca-linha:  rgba(234, 241, 245, .10);

    /* No escuro a ação CLAREIA ao passar o mouse, e o texto dela é escuro. */
    --acao:       #3BA7E0;
    --acao-hover: #62BCEA;
    --acao-ativo: #8BCFF1;
    --sobre-acao: #052032;

    --conversa:     #0A1A16;
    --balao:        #134D37;
    --balao-texto:  #E4F3EC;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .34), 0 8px 16px -6px rgba(0, 0, 0, .46);
    --sombra-3: 0 4px 8px rgba(0, 0, 0, .38), 0 18px 36px -12px rgba(0, 0, 0, .56);

    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ 2. FUNDAÇÕES */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta-900);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* As superfícies que a gente não desenhou continuam carregando o desenho. */
::selection { background: var(--marca-fundo); color: var(--marca-texto); }
:where(input, textarea) { caret-color: var(--marca-600); }
:where(a) { color: var(--marca-600); text-underline-offset: .2em; text-decoration-thickness: 1px; }
:where(a):hover { color: var(--marca-700); }

* { scrollbar-width: thin; scrollbar-color: var(--tinta-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--tinta-300); border-radius: var(--r-full);
  border: 3px solid var(--fundo);
}
*::-webkit-scrollbar-thumb:hover { background: var(--tinta-400); }
*::-webkit-scrollbar-track { background: transparent; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--marca-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-size: var(--t-2xl); font-weight: 700; }
h2 { font-size: var(--t-lg); font-weight: 600; }
h3 { font-size: var(--t-md); font-weight: 600; }
p  { margin: 0; }

/* Dado tabular é mono e alinhado — coluna de número que dança é erro de leitura. */
.dado, time, .n-dinheiro, .n-contagem {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.dado { font-family: var(--fonte-dado); font-size: var(--t-sm); letter-spacing: -.02em; }

/* Dinheiro em Archivo com algarismo tabular: a mono desenha o espaço inquebrável do
   "R$" com largura cheia e a coluna abre um buraco. Mono fica pra horário, id e
   telefone, onde o alinhamento monoespaçado é o ponto. */
.moeda { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; font-weight: 600; }

/* A escala fixa, em TODA tela: dinheiro (maior) > contagem > horário. O horário é o
   terceiro degrau e mora no `.dado`, porque hora sempre aparece dentro da linha de
   apoio, nunca como valor isolado. */
.n-dinheiro { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.n-contagem { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }

.rotulo {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-500);
}
.apoio  { color: var(--tinta-500); font-size: var(--t-base); }
.dica   { color: var(--tinta-500); font-size: var(--t-sm); margin-top: var(--e-1); }
.explica{ color: var(--tinta-500); font-size: var(--t-md); max-width: 62ch; margin-top: var(--e-2); }
.vazio  { color: var(--tinta-500); padding: var(--e-3) 0; }

.icone { width: 20px; height: 20px; flex: none; display: block; }
.icone-sm { width: 16px; height: 16px; }

/* ----------------------------------------------------------------- 3. CASCA */

.casca { min-height: 100vh; display: flex; flex-direction: column; }

/* --- Lateral: a marca ocupa a região inteira, não um filete --- */
.lateral {
  background: var(--marca-900);
  color: #fff;
  display: none;
  flex-direction: column;
  width: var(--lateral);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
}
.sigla svg { width: 100%; height: 100%; }

.lateral .marca {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-4);
  color: var(--marca-fraca); text-decoration: none; font-weight: 600; font-size: var(--t-md);
  letter-spacing: -.02em;
}
/* O nome é colado e em caixa-baixa, como o domínio que a pessoa vai digitar. A
   primeira metade é branco cheio; a segunda recebe o degradê. */
.marca .nome-marca {
  font-family: 'Poppins', var(--fonte);
  font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; color: #fff;
}
.marca .nome-marca b {
  font-weight: 700;
  background: linear-gradient(90deg, #8A2BF2 0%, #FF1FA6 50%, #FF9A1F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Degradê em texto depende de `background-clip`. Onde ele não pega, `color:
   transparent` deixaria o nome INVISÍVEL — metade da marca sumiria sem aviso. Esta
   consulta devolve a cor sólida nesse caso. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .marca .nome-marca b { color: #F97316; background: none; }
}
.lateral .marca .sigla {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex: none;
  background: none;
  display: grid; place-items: center;
}
.lateral nav { display: flex; flex-direction: column; gap: 2px; padding: var(--e-2) var(--e-3); flex: 1; }
.lateral nav a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 9px var(--e-3); border-radius: var(--r-sm);
  color: var(--marca-fraca); text-decoration: none; font-size: var(--t-base); font-weight: 500;
  transition: background var(--rapido), color var(--rapido);
}
.lateral nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral nav a.agora { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.lateral nav a .icone { opacity: .85; }
.lateral nav a.agora .icone { opacity: 1; }

.lateral .rodape { border-top: 1px solid var(--marca-linha); padding: var(--e-3); }
.lateral .quem {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3);
  width: 100%; background: none; border: 0; border-radius: var(--r-sm);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--rapido);
}
.lateral .quem:hover { background: rgba(255, 255, 255, .07); }
.lateral .quem .inicial {
  width: 30px; height: 30px; border-radius: var(--r-full); flex: none;
  background: var(--acao); color: var(--sobre-acao); display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700;
}
.lateral .quem .nome { flex: 1; min-width: 0; font-size: var(--t-base); font-weight: 600; }
.lateral .quem .plano { display: block; font-size: var(--t-xs); color: var(--marca-fraca); font-weight: 400; }
.lateral .quem .nome span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Barra superior do celular --- */
.topo {
  display: flex; align-items: center; gap: var(--e-3);
  /* No iPhone (app e "adicionar à tela de início") a página vai até a borda de cima:
     a barra desce o tamanho do entalhe para o logo não ficar embaixo do relógio. */
  padding: calc(env(safe-area-inset-top, 0px) + var(--e-3)) var(--e-4) var(--e-3);
  background: var(--marca-900); color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.topo .marca { color: #fff; text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: var(--e-2); }
.topo .marca .sigla {
  width: 26px; height: 26px; border-radius: var(--r-xs); flex: none;
  background: none;
  display: grid; place-items: center;
}
.topo .espaco { flex: 1; }
.topo .sair {
  background: none; border: 1px solid var(--marca-linha); color: #fff;
  border-radius: var(--r-sm); padding: 6px 10px; font: inherit; font-size: var(--t-sm); cursor: pointer;
}

/* --- Barra de serviço: "está trabalhando pra você agora" --- */
.servico {
  display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap;
  padding: var(--e-3) var(--e-6);
  background: var(--superficie);
  border-bottom: 1px solid var(--tinta-200);
}
.servico .item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--tinta-700); }
.servico .item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.servico .item .icone { color: var(--tinta-400); }

/* A régua da janela de envio: o dia inteiro em 8h–22h, com a hora atual marcada. */
.regua { flex: 1; min-width: 180px; max-width: 420px; display: block; }
.regua .trilho {
  display: block;
  position: relative; height: 5px; border-radius: var(--r-full);
  background: var(--tinta-200); overflow: visible;
}
.regua .aberto {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  border-radius: var(--r-full); background: var(--marca-200);
}
.regua .agora {
  position: absolute; top: 50%; width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--acao); border: 2px solid var(--superficie);
  transform: translate(-50%, -50%);
}
.regua .pontas {
  display: flex; justify-content: space-between;
  font-family: var(--fonte-dado); font-size: var(--t-xs); color: var(--tinta-500);
  margin-top: 5px;
}

/* --- Conteúdo --- */
.area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conteudo { padding: var(--e-6) var(--e-4) var(--e-10); max-width: 1160px; width: 100%; }
.cabecalho-pagina { margin-bottom: var(--e-6); }
.cabecalho-pagina h1 { font-size: var(--t-2xl); }

/* --- Barra inferior do celular --- */
.barra-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; background: var(--superficie);
  border-top: 1px solid var(--tinta-200);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px; text-decoration: none;
  color: var(--tinta-500); font-size: var(--t-xs); font-weight: 500;
}
.barra-inferior a.agora { color: var(--acao); font-weight: 600; }

@media (min-width: 1024px) {
  .casca { flex-direction: row; }
  .lateral { display: flex; }
  .topo, .barra-inferior { display: none; }
  .area { margin-left: var(--lateral); }
  .conteudo { padding: var(--e-7) var(--e-7) var(--e-10); }
  body { padding-bottom: 0; }
}
@media (max-width: 1023px) {
  body { padding-bottom: 64px; }
  .servico { padding: var(--e-3) var(--e-4); gap: var(--e-4); }
}

/* ------------------------------------------------------------ 4. SUPERFÍCIES */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--tinta-200);
  border-radius: var(--r);
  box-shadow: var(--sombra-1);
}
.cartao > .corpo { padding: var(--e-5); }

/* Cartão de destaque: a marca ocupando uma região DENTRO do conteúdo, não só na
   moldura. É o traço do Asaas que o dono apontou, e sem isto toda superfície da
   área de trabalho era o mesmo branco sobre o mesmo cinza. */
.cartao.destaque {
  background: var(--marca-fundo);
  border-color: var(--marca-200);
}
.cartao.destaque > .cabeca { border-bottom-color: var(--marca-200); }
.cartao.destaque h2 { color: var(--marca-texto); }
.cartao.destaque .valor { color: var(--marca-texto); }
.cartao.destaque .apoio { color: var(--tinta-700); }
.cartao > .cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--tinta-200);
}
.cartao > .cabeca h2 { font-size: var(--t-md); }
.cartao > .pe {
  padding: var(--e-3) var(--e-5); border-top: 1px solid var(--tinta-200);
  background: var(--superficie-2);
  border-radius: 0 0 var(--r) var(--r);
  font-size: var(--t-sm); color: var(--tinta-500);
}

.grade      { display: grid; gap: var(--e-4); }
/* Cada cartão com a altura do próprio conteúdo: esticado, o mais curto vira um
   retângulo com um palmo de vazio embaixo. */
/* Era `.grade.topo`, e `topo` já é o cabeçalho azul do celular: as grades herdavam o fundo
   escuro e a posição grudada, e os rótulos dos formulários de Cupons e Plano sumiam. */
.grade.alinha-topo { align-items: start; }
.grade.duas { grid-template-columns: 1fr; }
.grade.tres { grid-template-columns: 1fr; }
.pilha      { display: flex; flex-direction: column; gap: var(--e-4); }
.pilha.junta{ gap: var(--e-2); }
.fileira    { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fileira.entre { justify-content: space-between; }

@media (min-width: 720px) {
  .grade.duas { grid-template-columns: 1fr 1fr; }
  .grade.tres { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grade.principal { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
}

/* Linha de lista: hover legível, divisor de 1px, sem cartão dentro de cartão. */
.linhas { display: flex; flex-direction: column; }
.linhas > * {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--tinta-200);
  text-decoration: none; color: inherit;
}
.linhas > *:last-child { border-bottom: 0; }
a.linha:hover, .linhas > a:hover { background: var(--tinta-100); }
/* `.linha-escolha` entrou aqui junto: título e explicação numa escolha de rádio
   precisam da mesma quebra que numa linha de lista — sem ela a explicação cola no
   título e a escolha vira um parágrafo. */
.linhas .principal-txt, .linha .principal-txt, .linha-escolha .principal-txt, .linha-item .principal-txt { flex: 1; min-width: 0; }
.linhas .principal-txt strong, .linha .principal-txt strong, .linha-escolha .principal-txt strong, .linha-item .principal-txt strong { display: block; font-weight: 600; }
.linhas .principal-txt .apoio, .linha .principal-txt .apoio, .linha-escolha .principal-txt .apoio, .linha-item .principal-txt .apoio { display: block; font-size: var(--t-sm); }
.linhas .foto, .linha .foto, .linha-item .foto {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  object-fit: cover; background: var(--tinta-100); border: 1px solid var(--tinta-200);
}

/* O número de ordem da lista. Tabular porque 9 e 10 precisam ocupar a mesma coluna —
   senão a fileira de botões dança de linha pra linha. */
.posicao {
  flex: none; min-width: 22px; text-align: right;
  color: var(--tinta-500); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- 5. CONTROLES */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: 10px var(--e-4); min-height: 42px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: var(--t-base);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.botao.principal { background: var(--acao); color: var(--sobre-acao); box-shadow: var(--sombra-1); }
.botao.principal:hover:not(:disabled) { background: var(--acao-hover); }
.botao.principal:active:not(:disabled) { background: var(--acao-ativo); box-shadow: none; }

.botao.secundario { background: var(--superficie); color: var(--tinta-900); border-color: var(--tinta-300); }
.botao.secundario:hover:not(:disabled) { background: var(--tinta-100); border-color: var(--tinta-400); }

.botao.discreto { background: transparent; color: var(--tinta-700); }
.botao.discreto:hover:not(:disabled) { background: var(--tinta-100); }

.botao.perigo { background: var(--superficie); color: var(--perigo-texto); border-color: var(--perigo-forte); }
.botao.perigo:hover:not(:disabled) { background: var(--perigo-fundo); }

.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.largo { width: 100%; }
.botao.miudo { min-height: 34px; padding: 6px var(--e-3); font-size: var(--t-sm); }

/* Carregando: o botão diz que está trabalhando, e não aceita segundo clique. */
.botao[aria-busy="true"] { color: transparent !important; position: relative; pointer-events: none; }
.botao[aria-busy="true"]::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--sobre-acao); animation: girando .6s linear infinite;
}
.botao.secundario[aria-busy="true"]::after { color: var(--tinta-700); }
@keyframes girando { to { transform: rotate(360deg); } }

label, .campo > span {
  display: block; font-size: var(--t-sm); font-weight: 600;
  color: var(--tinta-700); margin-bottom: 6px;
}
.campo + .campo { margin-top: var(--e-4); }

/* Campo de só-leitura com o botão de copiar/compartilhar ao lado; empilha no celular estreito. */
.linha-campo { display: flex; gap: var(--e-2); align-items: stretch; flex-wrap: wrap; }
.linha-campo > input { flex: 1 1 8rem; min-width: 0; }
.linha-campo > .botao { flex: 0 0 auto; }
/* Dentro de uma grade quem espaça é o `gap`. Sem esta linha a margem se soma a ele e
   empurra a segunda coluna pra baixo: o primeiro campo da linha ficava 16px mais alto
   que os vizinhos, em toda grade de formulário do painel. */
.grade > .campo + .campo { margin-top: 0; }

input, select, textarea {
  width: 100%; padding: 10px var(--e-3); min-height: 42px;
  font: inherit; font-size: var(--t-base); color: var(--tinta-900);
  background: var(--superficie); border: 1px solid var(--tinta-300); border-radius: var(--r-sm);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input::placeholder, textarea::placeholder { color: var(--tinta-500); }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-400); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-600) 18%, transparent);
}
input[aria-invalid="true"] { border-color: var(--perigo-forte); }
select {
  appearance: none; padding-right: var(--e-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e-3) center;
}
input[type="date"] { min-height: 42px; }

/* ---------------------------------------------------------------- 6. ESTADO */

/* Estado nunca é só cor: ponto + PALAVRA, legível por quem não distingue cores. */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  background: var(--tinta-100); color: var(--tinta-700);
}
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.selo.bom     { background: var(--ok-fundo);      color: var(--ok-texto); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao-texto); }
.selo.ruim    { background: var(--perigo-fundo);  color: var(--perigo-texto); }
.selo.marca   { background: var(--marca-fundo);   color: var(--marca-texto); }

.aviso {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-sm);
  border: 1px solid transparent; font-size: var(--t-base);
  margin-bottom: var(--e-4);
}
.aviso .icone { margin-top: 2px; }
.aviso.erro { background: var(--perigo-fundo); border-color: color-mix(in srgb, var(--perigo-forte) 30%, transparent); color: var(--perigo-texto); }
.aviso.ok   { background: var(--ok-fundo);     border-color: color-mix(in srgb, var(--ok-forte) 30%, transparent);     color: var(--ok-texto); }
.aviso.info { background: var(--marca-fundo);  border-color: color-mix(in srgb, var(--acao) 30%, transparent);  color: var(--marca-texto); }
.aviso.atencao { background: var(--atencao-fundo); border-color: color-mix(in srgb, var(--atencao-forte) 30%, transparent); color: var(--atencao-texto); }

/* Escada de degraus contáveis: "quantas ainda posso mandar hoje" se conta, não se estima. */
.escada { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.escada i { flex: 1; min-width: 3px; background: var(--tinta-200); height: 60%; }
.escada i.cheio { background: var(--acao); height: 100%; }
.escada i.teto  { background: var(--atencao-forte); }

/* Estado vazio: sempre com a ação que resolve. */
.nada {
  text-align: center; padding: var(--e-8) var(--e-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
}
.nada .simbolo {
  width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--marca-fundo); color: var(--marca-texto);
}
.nada h3 { font-size: var(--t-md); }
.nada p { color: var(--tinta-500); max-width: 42ch; }

/* Passo do checklist de ativação. */
.passo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--tinta-200); }
.passo:last-child { border-bottom: 0; }
.passo .marca-passo {
  width: 26px; height: 26px; border-radius: var(--r-full); flex: none;
  border: 2px solid var(--tinta-300); display: grid; place-items: center; color: #fff;
}
.passo.feito .marca-passo { background: var(--ok-forte); border-color: var(--ok-forte); }
.passo .titulo { flex: 1; font-weight: 500; }
.passo.feito .titulo { color: var(--tinta-500); }

/* Números de destaque, sem virar o template de quatro cartões iguais. */
.numero { display: flex; flex-direction: column; gap: 2px; }
.numero .valor { color: var(--tinta-900); }
.numero .apoio { font-size: var(--t-sm); }

.qr { display: grid; place-items: center; gap: var(--e-3); padding: var(--e-5); }
.qr img {
  width: 232px; max-width: 100%; image-rendering: pixelated;
  border: 1px solid var(--tinta-200); border-radius: var(--r); background: #fff; padding: var(--e-2);
}

.tabela { width: 100%; overflow-x: auto; }
.tabela table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tabela th {
  text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-500);
  padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--tinta-200); white-space: nowrap;
}
.tabela td { padding: var(--e-3); border-bottom: 1px solid var(--tinta-200); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--tinta-100); }

/* ------------------------------------------------------------- 7. MOVIMENTO */

/* Uma gramática só: entra em 160ms saindo de um estado JÁ visível. Nada pisca. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra var(--calmo) both; }
  @keyframes entra { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------- 8. UTILIDADE */

.acima-6 { margin-top: var(--e-6); }
.abaixo-4 { margin-bottom: var(--e-4); }
.abaixo-6 { margin-bottom: var(--e-6); }
.divisor-acima { border-top: 1px solid var(--tinta-200); }
.estreito { max-width: 640px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--e-3); top: -100px; z-index: 50;
  background: var(--acao); color: var(--sobre-acao);
  padding: var(--e-2) var(--e-4); border-radius: var(--r-sm); text-decoration: none;
}
.pular:focus { top: var(--e-3); }
[hidden] { display: none !important; }

/* ------------------------------------------------- 9. ENTRADA (login e senha) */

/* A página que todo visitante vê primeiro. Metade vitrine (o que a ferramenta faz),
   metade login. Refeita em 25/09/2026: logo pequeno e um vão enorme entre a chamada e
   as provas — o espaço agora é ocupado pelo produto (mensagem de exemplo + recursos). */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1fr; align-content: start; }

.entrada .vitrine {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(138, 43, 242, .16), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 154, 31, .10), transparent 60%),
    var(--marca-900);
  color: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + var(--e-6)) var(--e-5) var(--e-7);
  display: flex; flex-direction: column; gap: var(--e-6);
}

/* Logo GRANDE: é a primeira coisa da página, não um selo no canto. */
.entrada .vitrine .marca {
  display: inline-flex; align-items: center; gap: var(--e-3); align-self: flex-start;
  color: #fff; text-decoration: none;
}
.entrada .vitrine .marca .sigla {
  width: 44px; height: 44px; flex: none; background: none; display: grid; place-items: center;
}
.entrada .vitrine .marca .sigla svg { width: 100%; height: 100%; }
.entrada .vitrine .marca .nome-marca { font-size: 1.75rem; letter-spacing: -.035em; }

.entrada .chamada { display: flex; flex-direction: column; gap: var(--e-4); }
.entrada .vitrine h1 {
  font-size: clamp(1.75rem, 5.2vw, 2.25rem); font-weight: 800; line-height: 1.12;
  letter-spacing: -.03em; text-wrap: balance;
}
.entrada .vitrine h1 span { color: #FFB86B; }
.entrada .vitrine .chamada p { color: var(--marca-fraca); max-width: 52ch; font-size: var(--t-md); line-height: 1.55; }
.entrada .vitrine .chamada p strong { color: #fff; }

.entrada .lojas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.entrada .lojas li {
  padding: 6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--marca-linha); background: rgba(255, 255, 255, .06);
  font-size: var(--t-sm); font-weight: 600; color: #fff;
}

/* Exemplo e recursos só aparecem com espaço: no celular o login vem antes, e o link
   "Conheça tudo o que a ferramenta faz" leva à página de vendas completa. */
.entrada .vitrine-corpo { display: none; }

.entrada .mensagem-exemplo { margin: 0; display: none; flex-direction: column; gap: var(--e-2); }
.entrada .mensagem-exemplo figcaption {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); color: var(--marca-fraca); font-weight: 600;
}
.entrada .mensagem-exemplo .ponto { width: 8px; height: 8px; border-radius: 50%; background: #34A76A; }
.entrada .bolha {
  position: relative;
  background: #E7FFDB; color: #0B1620;
  border-radius: 4px 14px 14px 14px;
  padding: var(--e-3) var(--e-4) var(--e-5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-size: var(--t-base); line-height: 1.45;
  display: flex; flex-direction: column; gap: 4px;
}
.entrada .bolha p { margin: 0; }
.entrada .bolha .produto { font-weight: 700; }
.entrada .bolha s { color: #5A6B77; }
.entrada .bolha .link { color: #0F6292; text-decoration: underline; text-underline-offset: 2px; }
.entrada .bolha .convite { color: #2B3D4A; font-size: var(--t-sm); }
.entrada .bolha .hora { position: absolute; right: var(--e-3); bottom: 6px; font-size: .6875rem; color: #5A6B77; }
.entrada .mensagem-exemplo .legenda { margin: 0; font-size: var(--t-xs); color: var(--marca-fraca); }

.entrada .recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5) var(--e-6); }
.entrada .recursos li { display: flex; align-items: flex-start; gap: var(--e-3); }
.entrada .recursos li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entrada .recursos .icone {
  flex: none; width: 36px; height: 36px; padding: 8px; box-sizing: border-box;
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); color: #FFB86B;
}
.entrada .recursos b { font-weight: 700; font-size: var(--t-md); color: #fff; }
.entrada .recursos span { color: var(--marca-fraca); font-size: var(--t-sm); line-height: 1.5; }

/* Login: caixa centrada, com título — não um formulário perdido no branco. */
.entrada .painel {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--e-6) var(--e-4) var(--e-9);
  background: var(--fundo);
}
.entrada .painel > * { width: 100%; max-width: 420px; margin-inline: auto; }
.entrada .caixa-login {
  background: var(--superficie); border: 1px solid var(--tinta-200); border-radius: var(--r-lg);
  padding: var(--e-7) var(--e-6); box-shadow: var(--sombra-1);
}
.entrada .titulo-login { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.025em; margin: 0 0 var(--e-1); }
.entrada .apoio-login { color: var(--tinta-500); margin: 0 0 var(--e-5); }
.entrada .conhecer { margin: var(--e-5) 0 0; text-align: center; font-size: var(--t-sm); }
.entrada .conhecer a { color: var(--acao); font-weight: 600; text-decoration: none; }
.entrada .conhecer a:hover { text-decoration: underline; }

@media (min-width: 1000px) {
  .entrada { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-content: stretch; }
  .entrada .vitrine { padding: var(--e-9) clamp(var(--e-8), 5vw, 88px); justify-content: center; gap: var(--e-8); }
  .entrada .vitrine .marca .sigla { width: 56px; height: 56px; }
  .entrada .vitrine .marca .nome-marca { font-size: 2.25rem; }
  .entrada .vitrine h1 { font-size: clamp(2.125rem, 3vw, 3rem); }
  .entrada .vitrine-topo {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--e-8); align-items: center;
  }
  .entrada .mensagem-exemplo { display: flex; }
  .entrada .vitrine-corpo { display: block; padding-top: var(--e-7); border-top: 1px solid var(--marca-linha); }
  .entrada .recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entrada .painel { padding: var(--e-9) var(--e-7); justify-content: center; }
}

.abas { display: flex; gap: var(--e-1); padding: var(--e-1); background: var(--tinta-100); border-radius: var(--r-sm); margin-bottom: var(--e-5); }
.abas button {
  flex: 1; padding: 9px var(--e-3); border: 0; border-radius: var(--r-xs);
  background: transparent; font: inherit; font-weight: 600; font-size: var(--t-base);
  color: var(--tinta-500); cursor: pointer; transition: background var(--rapido), color var(--rapido);
}
.abas button[aria-selected="true"] { background: var(--superficie); color: var(--tinta-900); box-shadow: var(--sombra-1); }

/* Cartão sem cabeça nem pé: o corpo é o próprio cartão. */
.cartao.simples { padding: var(--e-4) var(--e-5); }
.cartao.simples + .cartao.simples { margin-top: var(--e-3); }

/* Lista de itens com marca de conferido — usada nos planos e na página de vendas. */
.lista-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.lista-itens li { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-base); }
.lista-itens .icone { color: var(--ok-forte); margin-top: 3px; }

/* Barra de origem: comparação de tamanho relativo, que é o que a pergunta pede
   ("de onde vem mais gente?"), e não um gráfico que ninguém consegue ler de relance. */
.barra-origem { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: var(--e-3); align-items: center; }
.barra-origem .rotulo-barra { font-size: var(--t-sm); color: var(--tinta-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-origem .trilho-barra { height: 8px; background: var(--tinta-200); border-radius: var(--r-full); overflow: hidden; }
.barra-origem .trilho-barra i { display: block; height: 100%; background: var(--acao); border-radius: var(--r-full); }

/* --------------------------------------------------- 10. PÁGINA DE VENDAS */

/* Aqui a cor de marca não acompanha: ela É o primeiro viewport. Um visitante que
   chega por anúncio decide em segundos, e o que decide é o campo de cor, o título e
   o botão — não um acento num canto. */
.venda-topo { background: var(--marca-900); color: #fff; padding-top: env(safe-area-inset-top, 0px); }
.venda-barra {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5); max-width: 1160px; margin-inline: auto;
}
.venda-barra .marca { display: flex; align-items: center; gap: var(--e-3); color: #fff; text-decoration: none; font-weight: 700; }
.venda-barra .marca .sigla {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: none;
  display: grid; place-items: center; font-size: var(--t-sm); font-weight: 800;
}
.venda-barra .espaco { flex: 1; }
.venda-barra a.menu-venda { color: var(--marca-fraca); text-decoration: none; font-weight: 500; }
.venda-barra a.menu-venda:hover { color: #fff; }

.venda-heroi {
  max-width: 1160px; margin-inline: auto;
  padding: var(--e-7) var(--e-5) var(--e-10);
  display: grid; gap: var(--e-8); align-items: center;
}
.venda-heroi h1 { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; }
.venda-heroi .chamada {
  color: var(--marca-fraca); font-size: var(--t-lg); max-width: 46ch;
  margin-top: var(--e-4);
  /* Entrelinha explícita: é o único parágrafo longo desta página, e o herdado do
     corpo não sobrevivia ao salto de tamanho — o detector mediu 1.29 aqui. */
  line-height: 1.5;
}
.venda-heroi .acoes { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-6); }
.venda-heroi .garantias { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-5); color: var(--marca-fraca); font-size: var(--t-sm); }
.venda-heroi .garantias span { display: flex; align-items: center; gap: 6px; }
.venda-heroi .garantias .icone { color: var(--marca-500); }

/* A prova é o produto trabalhando: a mesma lista de envios que o cliente vê. */
.demo {
  background: var(--superficie); color: var(--tinta-900);
  border-radius: var(--r-lg); box-shadow: var(--sombra-3);
  overflow: hidden; border: 1px solid var(--marca-linha);
}
.demo .barra-demo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--tinta-200);
  background: var(--superficie-2); font-size: var(--t-sm); color: var(--tinta-500);
}
.demo .fila { display: flex; flex-direction: column; }
.demo .fila > div {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--tinta-200);
}
.demo .fila > div:last-child { border-bottom: 0; }
.demo .fila .quadro {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  background: var(--marca-fundo); color: var(--marca-texto);
  display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700;
}
.demo .fila .txt { flex: 1; min-width: 0; }
.demo .fila .txt strong { display: block; font-size: var(--t-base); }
.demo .fila .txt span { font-size: var(--t-sm); color: var(--tinta-500); }
.legenda-demo { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--marca-fraca); text-align: center; }

.secao { max-width: 1160px; margin-inline: auto; padding: var(--e-10) var(--e-5); }
.secao > h2, .secao > div > h2 { font-size: var(--t-2xl); font-weight: 700; max-width: 22ch; }

/* Lista de diferenças: divisor de 1px em vez de quatro cartões do mesmo tamanho,
   que é o andaime preguiçoso que o piso de acabamento recusa. */
.diferencas { display: grid; gap: 0; }
.diferencas > div { padding: var(--e-5) 0; border-top: 1px solid var(--tinta-200); }
.diferencas h3 { margin-bottom: var(--e-1); }
.diferencas p { color: var(--tinta-500); max-width: 54ch; }
@media (min-width: 760px) {
  .diferencas { grid-template-columns: 1fr 1fr; column-gap: var(--e-8); }
}
.secao > .explica, .secao > div > .explica { margin-bottom: var(--e-7); }

.passos-venda { counter-reset: passo; display: grid; gap: var(--e-5); }
.passos-venda > li { list-style: none; display: flex; gap: var(--e-4); align-items: flex-start; }
.passos-venda > li::before {
  counter-increment: passo; content: counter(passo);
  width: 32px; height: 32px; flex: none; border-radius: var(--r-full);
  background: var(--marca-fundo); color: var(--marca-texto);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-base);
}
.passos-venda h3 { margin-bottom: 2px; }
.passos-venda p { color: var(--tinta-500); max-width: 52ch; }

/* Três fatos numa faixa da cor da marca — antes eram três cartões iguais, e um
   deles tinha a palavra "Teto" ocupando o lugar de um número. */
.faixa-marca { background: var(--marca-900); color: #fff; }
.faixa-marca .dentro {
  max-width: 1160px; margin-inline: auto; padding: var(--e-9) var(--e-5);
  display: grid; gap: var(--e-6);
}
.faixa-marca h2 { font-size: var(--t-2xl); font-weight: 700; max-width: 20ch; }
.faixa-marca .fatos { display: grid; gap: var(--e-6); }
.faixa-marca .fatos > div { border-top: 1px solid var(--marca-linha); padding-top: var(--e-4); }
.faixa-marca .fatos b { display: block; font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.025em; }
.faixa-marca .fatos span { color: var(--marca-fraca); font-size: var(--t-base); }

.venda-fecho { background: var(--marca-900); color: #fff; }
.venda-fecho .secao { text-align: center; }
.venda-fecho h2 { margin-inline: auto; }
.venda-fecho p { color: var(--marca-fraca); max-width: 52ch; margin: var(--e-3) auto var(--e-6); }

.rodape-venda {
  border-top: 1px solid var(--tinta-200); padding: var(--e-6) var(--e-5);
  color: var(--tinta-500); font-size: var(--t-sm); text-align: center;
}

@media (min-width: 900px) {
  .venda-heroi { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: var(--e-10); }
  .passos-venda { grid-template-columns: repeat(3, 1fr); gap: var(--e-7); }
  .faixa-marca .dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .faixa-marca .fatos { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
}

/* Em tela estreita a linha quebra, e o valor vai pra direita da segunda linha em vez
   de se espremer no meio do texto — que é onde ele fica ilegível. */
@media (max-width: 560px) {
  .linhas > * { flex-wrap: wrap; row-gap: var(--e-1); }
  .linhas .principal-txt { flex: 1 1 58%; }
  .linhas > * > .dado, .linhas > * > .moeda { margin-left: auto; }
  .cabecalho-pagina h1 { font-size: var(--t-xl); }
}

/* Sem foto, a linha perdia a coluna da esquerda e desalinhava das vizinhas. O bloco
   neutro com a sigla da loja informa algo em vez de só ocupar espaço. */
.foto.sem-foto {
  display: grid; place-items: center;
  background: var(--tinta-100); color: var(--tinta-500);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em;
}

/* --------------------------------------------------------- 11. PAINEL (KPIs) */

/* Quatro números NÃO são quatro cartões iguais: o dinheiro manda, e a escala fixa do
   sistema já diz isso. Aqui o cartão do dinheiro ocupa duas colunas e carrega a cor
   da marca; os outros três são menores e neutros. */
.kpis { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
.kpi {
  background: var(--superficie); border: 1px solid var(--tinta-200);
  border-radius: var(--r); box-shadow: var(--sombra-1);
  padding: var(--e-4) var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-1); align-items: flex-start;
}
.kpi .n-contagem, .kpi .n-dinheiro { color: var(--tinta-900); }
.kpi.destaque-kpi {
  background: var(--marca-fundo); border-color: var(--marca-200);
}
.kpi.destaque-kpi .rotulo { color: var(--marca-texto); }
.kpi.destaque-kpi .n-dinheiro { color: var(--marca-texto); }
.kpi.destaque-kpi .apoio { color: var(--tinta-700); }

/* A variação nunca é só uma seta: traz o número e a palavra do que está comparando. */
.delta {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.delta .apoio-delta { font-weight: 400; color: var(--tinta-500); font-size: var(--t-xs); }
.delta.sobe   { color: var(--ok-texto); }
.delta.desce  { color: var(--perigo-texto); }
.delta.neutro { color: var(--tinta-500); font-weight: 400; }

.seletor-periodo { width: auto; min-width: 170px; flex: none; }

@media (min-width: 680px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi.destaque-kpi { grid-column: span 2; }
}
@media (min-width: 1100px) {
  /* CINCO colunas, não quatro: são quatro números e o do dinheiro ocupa dois lugares.
     Com quatro colunas o último caía sozinho numa segunda linha. */
  .kpis { grid-template-columns: repeat(5, 1fr); }
  .kpi.destaque-kpi { grid-column: span 2; }
}

/* --- Gráfico --- */
.grafico { width: 100%; height: 150px; display: block; }
.legenda-grafico {
  display: flex; gap: var(--e-5); flex-wrap: wrap;
  margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-500);
}
.legenda-grafico span { display: flex; align-items: center; gap: 6px; }
.legenda-grafico b { color: var(--tinta-700); font-weight: 600; }
.legenda-grafico i { width: 10px; height: 10px; flex: none; }
.legenda-grafico .marca-envio { background: var(--tinta-300); }
.legenda-grafico .marca-venda { background: var(--acao); }

/* --- Linha do tempo --- */
.marca-atividade {
  width: 28px; height: 28px; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--tinta-100); color: var(--tinta-500);
}
.marca-atividade.bom  { background: var(--ok-fundo);     color: var(--ok-texto); }
.marca-atividade.ruim { background: var(--perigo-fundo); color: var(--perigo-texto); }

/* As datas do eixo ficam fora do SVG: o desenho estica na largura e texto esticado
   sai deformado. */
.eixo-grafico {
  display: flex; justify-content: space-between;
  font-family: var(--fonte-dado); font-size: var(--t-xs); color: var(--tinta-500);
  margin-top: 6px;
}

/* ------------------------------------------------------- 12. SINO DE AVISOS */

/* Fica na barra de serviço, que existe nas duas composições. E SOME por inteiro
   quando não há nada: sino com "0" é ruído pedindo pra ser ignorado. */
.sino {
  margin-left: auto; position: relative; flex: none;
  display: grid; place-items: center; width: 36px; height: 36px;
  background: none; border: 1px solid var(--tinta-300); border-radius: var(--r-sm);
  color: var(--tinta-700); cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido);
}
.sino:hover { background: var(--tinta-100); border-color: var(--tinta-400); }
.sino.urgente { color: var(--perigo-texto); border-color: var(--perigo-forte); }
.conta-sino {
  /* O contador cresce em vez de furar a escala tipográfica: 10px não existe no
     sistema, e uma exceção "só no selinho" é como as escalas morrem. */
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: var(--r-full);
  background: var(--perigo-forte); color: #fff;
  font-size: var(--t-xs); font-weight: 700; line-height: 20px; text-align: center;
  border: 2px solid var(--superficie);
}

.caixa-avisos {
  background: var(--superficie);
  border-bottom: 1px solid var(--tinta-200);
  box-shadow: var(--sombra-2);
}
.cabeca-avisos {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--tinta-200);
}
.caixa-avisos .linhas { max-height: 320px; overflow-y: auto; }

/* ----------------------------------------------------- 13. AUTOMAÇÕES */

/* Dias da semana e lojas: alvo grande o bastante pro polegar, com o estado no
   preenchimento E na marca — nunca só na cor. */
.dias { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.dia {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 8px var(--e-3); min-height: 40px;
  border: 1px solid var(--tinta-300); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--tinta-700);
  font-size: var(--t-base); font-weight: 500; cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.dia:hover { border-color: var(--tinta-400); background: var(--tinta-100); }
.dia.marcado { background: var(--marca-fundo); border-color: var(--acao); color: var(--marca-texto); font-weight: 600; }
.dia input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--acao); }

.linha-escolha, .linha-item {
  display: flex; align-items: center; gap: var(--e-3); margin: 0;
  padding: var(--e-3); min-height: 48px;
  border: 1px solid var(--tinta-200); border-radius: var(--r-sm);
  background: var(--superficie); font-weight: 400;
}
/* A escolha é clicável inteira; o item só mostra e tem botões próprios — dar a ele
   `cursor: pointer` prometeria um clique que não existe. */
.linha-escolha { cursor: pointer; }
.linha-escolha:hover { background: var(--tinta-100); }
.linha-escolha input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--acao); }

/* Conjunto de campos sem a moldura que o navegador desenha por padrão. Desabilitado,
   ele apaga o bloco inteiro — que é o sinal de "pause pra editar". */
.sem-moldura { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.sem-moldura:disabled { opacity: .55; }

/* ------------------------------------------------------------ 14. VITRINE */

/* Grade de ofertas. A foto manda, porque é ela que faz alguém decidir publicar —
   e a coluna se ajusta ao que cabe, sem esticar cartão sobre espaço morto. */
.vitrine { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.oferta {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--tinta-200);
  border-radius: var(--r); box-shadow: var(--sombra-1); overflow: hidden;
}
.foto-oferta {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--tinta-100); border-bottom: 1px solid var(--tinta-200);
}
.foto-oferta.sem-foto {
  /* Sem foto o quadrado vira um palmo de nada. Vira faixa: informa a loja e devolve
     o espaço pro que importa, que é o título e o preço. */
  aspect-ratio: 16 / 5;
  display: grid; place-items: center;
  color: var(--tinta-500); font-size: var(--t-base); font-weight: 700; letter-spacing: .04em;
}
.corpo-oferta { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.titulo-oferta {
  font-size: var(--t-base); font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.precos { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; margin-top: auto; }
.preco-por { font-size: var(--t-lg); color: var(--tinta-900); }
.preco-de  { color: var(--tinta-500); font-size: var(--t-sm); }


/* Um campo que atravessa a grade inteira — descrição livre ao lado de três campos
   curtos fica espremida e mentindo sobre quanto texto cabe. */
.campo.largura-cheia { grid-column: 1 / -1; }

/* ---------- Tela da mensagem ---------- */

/* Marcadores como fichas clicáveis. Botão de verdade, não span: quem navega por
   teclado insere marcador do mesmo jeito que quem clica. */
.fichas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ficha {
  font-family: var(--fonte-dado); font-size: var(--t-xs);
  padding: 5px var(--e-3); min-height: 30px;
  border: 1px solid var(--tinta-300); border-radius: var(--r-full);
  background: var(--superficie-2); color: var(--tinta-700);
  cursor: pointer; transition: background var(--rapido), border-color var(--rapido);
}
.ficha:hover { background: var(--marca-fundo); border-color: var(--marca-600); color: var(--marca-texto); }

.conversa {
  background: var(--conversa); border-radius: var(--r);
  padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2);
}
.foto-balao {
  width: 100%; max-width: 260px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  align-self: flex-end; display: block;
}
/* `pre` porque a quebra de linha do modelo É o conteúdo: renderizar como parágrafo
   esconderia exatamente o que o cliente está ajustando. */
.balao {
  align-self: flex-end; max-width: 260px;
  background: var(--balao); color: var(--balao-texto);
  padding: var(--e-3); border-radius: var(--r-sm);
  font-family: var(--fonte); font-size: var(--t-base); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  box-shadow: var(--sombra-1);
}
.foto-balao + .balao { border-top-left-radius: 0; border-top-right-radius: 0; }


/* ---------- Ajuda ---------- */

/* Texto pra LER, não pra operar: medida de leitura curta, hierarquia por espaço
   antes de por tamanho, e nenhum cartão — cartão aqui picaria o texto em caixinhas
   que o olho lê como itens de lista. */
.texto-longo {
  max-width: 68ch;
  color: var(--tinta-700);
  font-size: var(--t-md);
  line-height: 1.65;
}
.texto-longo h2 {
  margin: var(--e-9) 0 var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--tinta-200);
  color: var(--tinta-900); font-size: var(--t-xl);
}
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo h3 {
  margin: var(--e-6) 0 var(--e-2);
  color: var(--tinta-900); font-size: var(--t-md); font-weight: 650;
}
.texto-longo p { margin: 0 0 var(--e-3); }
.texto-longo ul { margin: 0; padding-left: var(--e-5); display: grid; gap: var(--e-2); }
.texto-longo code {
  font-family: var(--fonte-dado); font-size: var(--t-sm);
  background: var(--tinta-100); border: 1px solid var(--tinta-200);
  border-radius: var(--r-xs); padding: 1px 5px;
}

/* O elo de ajuda no rodapé da lateral: presente, e discreto o bastante pra não
   competir com a navegação. */
.ajuda-elo {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2);
  border-radius: var(--r-sm);
  color: var(--marca-fraca); text-decoration: none; font-size: var(--t-sm);
}
.ajuda-elo:hover { background: var(--marca-linha); color: #fff; }

/* Um ponto, não uma janela: quem abriu o painel pra resolver algo não deve ser
   interrompido por anúncio. */
.ponto-novidade {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok-forte); flex: none;
}

/* Lista curta dentro de um cartão (os grupos de um conjunto). */
.lista-simples { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--e-1); }

/* --- Dedo, não mouse ---
   Em tela de toque, todo alvo tem ao menos 44px de altura (WCAG 2.5.5 / Apple HIG). Os
   botões `miudo` (34px), o "Sair" do cabeçalho e as fichas de marcador da Mensagem
   (30px) ficavam abaixo disso no celular — conferência de 25/09/2026. No mouse, o
   tamanho compacto continua: lá a precisão é outra. */
@media (pointer: coarse) {
  .botao.miudo,
  .topo .sair,
  .ficha { min-height: 44px; }
  .topo .sair { padding-inline: var(--e-4); }
}

/* Data e hora não se partem no meio ("24/09," numa linha e "21:59" na outra). */
.dado { white-space: nowrap; }

/* ---------- App do celular (Capacitor) ---------- */
/* Cortina do Face ID: cobre o painel inteiro até desbloquear. */
.cortina-trava {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--e-6)) var(--e-4) calc(env(safe-area-inset-bottom, 0px) + var(--e-6));
  background: #07070B; color: #F2F2F7; text-align: center;
}
.cortina-trava img { border-radius: 20px; margin-bottom: var(--e-2); }
.cortina-trava p { margin: 0 0 var(--e-3); font-size: 1.125rem; font-weight: 600; }
.cortina-trava .botao { min-width: 16rem; min-height: 44px; }
.chave-linha { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; cursor: pointer; }
.chave-linha input { width: 22px; height: 22px; flex: 0 0 auto; }
/* Apple e Google não aceitam venda de assinatura dentro do app fora da compra deles.
   No app, a tela Plano só mostra — contratar e trocar ficam no site. */
.aviso-app { display: none; }
.dentro-do-app .aviso-app { display: flex; }
.dentro-do-app [data-compra], .dentro-do-app [data-escolher] { display: none !important; }