/* ═══════════════════════════════════════════════════════════════════════════
   A PORTA — estilo.

   ⚠️ ESTE ARQUIVO É O PROTÓTIPO, TRANSCRITO. Implementa
   `referencia-telas/login.html`, sha256
   b872a3167428f89f6b4417836c18045ac7a801d89db18e56d169f179d513e1ad.
   Ele é ESPECIFICAÇÃO, não inspiração: medidas, cores, ordem e espaçamento vêm
   literais. Só os NOMES DE CLASSE se adaptam — o prefixo `lg-` é a convenção
   desta base, e existe para o CSS da porta não colidir com o de outra tela.

   ⚠️ O QUE NÃO VEIO: os blocos `.demo`. Aquele `<nav>` era o NAVEGADOR DO
   PROTÓTIPO — seis botões para trocar de tela à mão. Aqui os seis estados são
   alcançados por eventos reais, e todos aceitam `?estado=<nome>` para serem
   endereçáveis e testáveis sem encenação.

   Divergiu do protótipo? Corrija ESTE arquivo, não o protótipo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   A PORTA — Rota Revalida.

   Card centrado, e o fundo é a ROTA em movimento: três serpentinas em
   profundidades diferentes, com uma luz percorrendo cada uma no seu tempo.
   É a metáfora do produto, não um gradiente decorativo — e ela é lenta
   de propósito: 34, 46 e 58 segundos por volta. Ninguém que entra para
   estudar precisa de uma tela agitada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ O `:root` DO PROTÓTIPO NÃO VEIO, e são duas razões.

   1 · SÓ `tokens.css` PODE TER COR LITERAL — é o que
       test/temaSemLiterais.test.js guarda. A paleta da porta já mora lá, como
       `--lg-*`: ela é a única do produto que NÃO segue o tema, porque quem
       chega na porta ainda não tem preferência guardada.

   2 · ⚠️ `--marca` COLIDIRIA. Ele é um token do TEMA em tokens.css, e o
       `:root` do protótipo o redefiniria para a página inteira. Nome de
       custom property é global: vence quem declara depois, e nada acusa.

   O protótipo declara o `:root` porque abre isolado, sem servidor e sem
   tokens.css. Aqui `login.html` carrega tokens.css ANTES desta folha. */


*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  background:var(--lg-breu);
  color:var(--lg-claro);
  font-family:var(--font-corpo);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ═══ O FUNDO ═══ */
.lg-cena{ position:fixed; inset:0; overflow:hidden; z-index:0; }
.lg-fundo{ position:absolute; inset:0; width:100%; height:100%; }

/* a luz correndo pelo caminho */
.lg-luz{
  stroke-dasharray:190 4000;
  stroke-dashoffset:190;
  animation:lg-corre var(--dur) linear infinite;
}
@keyframes lg-corre{ to{ stroke-dashoffset:-4000; } }

/* as pedras respirando, cada uma no seu tempo */
.lg-pd{
  animation:lg-respira 9s ease-in-out infinite;
  animation-delay:var(--d);
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes lg-respira{
  0%,100%{ opacity:.5; }
  50%    { opacity:1; }
}

/* uma névoa baixa, para o card não flutuar num vazio */
.lg-cena::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, var(--lg-nevoa-escura) 62%),
    radial-gradient(60% 50% at 50% 44%, var(--lg-nevoa-ouro) 0%, transparent 68%),
    radial-gradient(70% 60% at 50% 52%, var(--lg-nevoa-verde) 0%, transparent 72%);
  pointer-events:none;
}

/* ═══ O CARD ═══ */
.lg-palco{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px 76px;
}
.lg-card{
  width:100%; max-width:404px;
  padding:34px 38px 32px;
  text-align:center;
  border-radius:20px;
  background:var(--lg-vidro);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--lg-card-borda);
  box-shadow:
    0 40px 90px -30px var(--lg-card-sombra),
    inset 0 1px 0 var(--lg-card-brilho);
}

/* ⚠️ TUDO CENTRADO. Uma porta é simétrica: o olho entra pelo meio
   e não tem de escolher um lado.

   O SELO substitui o texto — ele já traz o nome dentro, e o ouro sobre
   o verde é a paleta da própria marca. É o único ouro da tela: se ele
   se repetisse em botão ou borda, deixaria de ser o selo. */
.lg-marca-tw{
  display:block;
  position:relative;
  /* a caixa que contém a fumaça, para ela não empurrar o resto */
  width:196px; height:196px;
  margin:0 auto;
  /* ⚠️ UM momento no carregamento, e só um: o selo assenta.
     A skill de design é clara — uma sequência orquestrada vale mais que
     efeitos espalhados. Nada mais na tela entra animado. */
  animation:lg-assenta 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lg-assenta{
  from{ opacity:0; transform:scale(.94) translateY(-6px); }
  to  { opacity:1; transform:none; }
}

/* ⚠️ A FUMAÇA são três véus de gradiente girando em tempos e sentidos
   diferentes — 42s, 58s e 34s. Nenhuma imagem, nenhum vídeo: só
   radial-gradient com blur, o que a deixa custar quase nada.
   O que a faz parecer fumaça e não um brilho pulsando é a DISCORDÂNCIA
   entre os três: quando um sobe, o outro desce, e o olho lê movimento
   sem achar o compasso. */
.lg-fumaca{
  position:absolute; inset:-56px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.lg-fumaca i{
  position:absolute; inset:0;
  border-radius:50%;
  filter:blur(22px);
  will-change:transform;
}
.lg-fumaca i:nth-child(1){
  background:
    radial-gradient(38% 30% at 30% 28%, var(--lg-fumaca-a)  0%, transparent 62%),
    radial-gradient(32% 40% at 72% 62%, var(--lg-fumaca-b) 0%, transparent 66%);
  animation:lg-gira1 42s linear infinite;
}
.lg-fumaca i:nth-child(2){
  background:
    radial-gradient(44% 34% at 66% 24%, var(--lg-fumaca-c) 0%, transparent 64%),
    radial-gradient(30% 36% at 26% 70%, var(--lg-fumaca-d)  0%, transparent 60%);
  animation:lg-gira2 58s linear infinite;
  filter:blur(30px);
}
.lg-fumaca i:nth-child(3){
  background:
    radial-gradient(30% 44% at 50% 82%, var(--lg-fumaca-e) 0%, transparent 68%);
  animation:lg-gira3 34s linear infinite;
  filter:blur(26px);
}
@keyframes lg-gira1{
  0%  { transform:rotate(0deg)    scale(1);    }
  50% { transform:rotate(180deg)  scale(1.14); }
  100%{ transform:rotate(360deg)  scale(1);    }
}
@keyframes lg-gira2{
  0%  { transform:rotate(360deg) scale(1.1);  }
  50% { transform:rotate(180deg) scale(.94);  }
  100%{ transform:rotate(0deg)   scale(1.1);  }
}
@keyframes lg-gira3{
  0%  { transform:rotate(0deg)   scale(1.06) translateY(0);    }
  50% { transform:rotate(-180deg) scale(1.2)  translateY(-7px); }
  100%{ transform:rotate(-360deg) scale(1.06) translateY(0);    }
}
.lg-selo, .lg-selo-p{
  position:relative; z-index:1;
  display:block; width:196px; height:196px;
  border-radius:50%;
  /* ⚠️ UMA definição, não seis. Repetir o base64 por tela levou o arquivo
     a 1 MB — a mesma imagem, seis vezes, e o navegador decodificando cada
     uma. Aqui ela é uma regra e o cache é do CSS.

     ⚠️ SELO OFICIAL, aprovado em 03/09/2026. É SÓ O MONOGRAMA — o R com o
     bastão e a serpente, sem "ROTA REVALIDA" e sem subtítulo no anel. O que
     decidiu foi o celular: a 156px o nome dentro do anel virava mancha, e
     sem ele o monograma tem presença de verdade na tela pequena.

     · anel ÚNICO. O duplo da arte antiga criava moiré na redução
     · monograma centrado na VERTICAL (sem o nome, o terço de baixo é dele)
       e a 1250 de 2048 — 78px de folga entre a ponta do swash e o anel,
       medidos na silhueta, não na caixa
     · enquadramento HORIZONTAL da arte original: +35px à direita do eixo
       do disco. Não recentralizar — muda a marca
     · SVG, não bitmap: o anel é curva, então não há resolução para degradar.
       Idêntico em 1x, 2x e 3x. Só o monograma é raster, a 600px para os
       ~120px em que aparece: folga de 1,5x mesmo em tela 3x

     PENDÊNCIA: sem o nome no anel, a tela não diz onde a pessoa está
     entrando. "Rota Revalida" precisa entrar em TEXTO — decisão de layout
     ainda aberta. */
  background:url("/img/marca/selo.svg") center/cover no-repeat;
  position:relative;
  /* ⚠️ A SOMBRA TEM DUAS CAMADAS, e cada uma faz uma coisa:

     1 · a sombra projetada, deslocada para baixo — é o que dá relevo
     2 · o halo de ouro, largo e baixo — a luz que o metal devolve

     O FIO DE 1px SAIU junto com os anéis pulsantes: o selo novo já traz
     o próprio anel de ouro, e um contorno extra encostado nele lê como
     borda dupla. A função do fio era não deixar a marca terminar no nada;
     o anel de 5px do SVG faz isso melhor do que 1px de sombra. */
  box-shadow:
    /* a projeção, mais fechada e mais escura: é ela que dá o relevo */
    0 20px 40px -14px var(--lg-selo-projecao),
    /* e o halo, largo e QUENTE — um metal iluminado devolve luz,
       e num fundo desta escuridão é isso que o faz parecer aceso
       em vez de colado */
    0 0 54px -12px var(--lg-fumaca-a),
    0 0 138px -28px var(--lg-selo-halo-largo);
}

/* ⚠️ OS DOIS ANÉIS DE LUZ PULSANTES FORAM REMOVIDOS em 03/09/2026.
   Eram dois círculos de 1px em -16px e -32px, respirando em 9s.
   Motivo: o selo novo já TEM um anel de ouro largo. Três anéis
   concêntricos em volta do mesmo disco competem entre si e reintroduzem
   o problema que a marca nova resolveu — o anel duplo que criava moiré.
   Quem faz o movimento agora é só a FUMAÇA, que é volume e não contorno.
   Se voltarem, o selo perde a leitura de peça única. */

.lg-titulo{
  margin:34px 0 0;
  font-family:var(--font-titulo);
  font-weight:800; font-size:29px; line-height:1.14;
  letter-spacing:-.038em; color:var(--lg-claro);
}
.lg-abaixo{ margin:12px 0 0; font-size:14.5px; color:var(--lg-meio); }
/* ⚠️ quando não há título, a primeira linha herda o espaço dele —
   senão o texto encosta no halo do selo */
.lg-abaixo strong{ color:var(--lg-claro); font-weight:600; }

/* o Google */
.lg-google{
  /* ⚠️ ele herdou o espaço da linha que saiu: agora o selo fala,
     e a ação vem em seguida. Nada entre os dois.

     E o espaço é generoso porque a FUMAÇA se estende 56px além do selo:
     medida do círculo, a folga pareceria suficiente; medida da fumaça,
     o botão estava dentro dela. O que ocupa a tela é o efeito, não o
     elemento — e o espaçamento se mede pelo que se vê. */
  margin-top:58px;
  min-height:52px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:11px;
  border-radius:var(--raio-lg);
  background:var(--lg-claro); border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--lg-tinta-btn);
  transition:transform .12s ease, box-shadow .12s ease;
}
.lg-google:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -10px var(--lg-google-sombra); }
.lg-google:active{ transform:none; }
.lg-google:focus-visible{ outline:2px solid var(--lg-marca); outline-offset:3px; }
.lg-google svg{ width:19px; height:19px; flex:none; }

.lg-ou{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:14px; margin:24px 0;
  font-size:13px; color:var(--lg-fraco);
}
.lg-ou::before,.lg-ou::after{ content:''; height:1px; background:var(--lg-musgo); }

.lg-campo{ display:block; text-align:left; }
.lg-campo-r{ display:block; font-size:13px; color:var(--lg-meio); margin-bottom:9px; }
.lg-campo input{
  width:100%; text-align:center; min-height:52px; padding:0 16px;
  border-radius:var(--raio-lg);
  background:var(--lg-campo-fundo);
  border:1px solid var(--lg-musgo);
  color:var(--lg-claro); font-family:inherit; font-size:15px;
  transition:border-color .14s ease, background .14s ease;
}
.lg-campo input::placeholder{ color:var(--lg-fraco); }
.lg-campo input:focus{ outline:none; border-color:var(--lg-brote); background:var(--lg-campo-fundo-foco); }
.lg-campo input:focus-visible{ border-color:var(--lg-marca); }

.lg-secundario{
  margin-top:12px; min-height:52px; width:100%;
  border-radius:var(--raio-lg); background:transparent;
  border:1px solid var(--lg-brote); cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--lg-claro);
  transition:border-color .14s ease, background .14s ease;
}
.lg-secundario:hover{ border-color:var(--lg-marca); background:var(--lg-secundario-hover); }
.lg-secundario:focus-visible{ outline:2px solid var(--lg-marca); outline-offset:3px; }

.lg-discreto{
  margin-top:12px; min-height:46px; width:100%;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14px; color:var(--lg-fraco);
}
.lg-discreto:hover{ color:var(--lg-meio); }
.lg-discreto:focus-visible{ outline:2px solid var(--lg-marca); outline-offset:3px; }

.lg-pe{
  margin:26px 0 0; padding-top:20px;
  border-top:1px solid var(--lg-musgo);
  font-size:12.5px; color:var(--lg-fraco); line-height:1.6;
}
.lg-pe a{ color:var(--lg-meio); text-decoration:none; border-bottom:1px solid var(--lg-musgo); }
.lg-pe a:hover{ color:var(--lg-claro); border-bottom-color:var(--lg-brote); }

/* ⚠️ A ASSINATURA fica abaixo de tudo e em tom baixo: ela é crédito,
   não informação de uso. Quem entra para estudar não precisa dela;
   quem procura quem fez o produto, encontra. */
/* ⚠️ .lg-assina REMOVIDA das telas em 04/09/2026. "Desenvolvido por
   VitalleTech / Talles Souza" saiu da porta: assinatura de autoria
   não é informação que o aluno precisa no momento de entrar, e
   ocupava duas linhas no pé de todas as seis telas. A regra fica
   aqui, sem uso, caso a assinatura volte em outro lugar. */
.lg-assina{
  margin:20px 0 0;
  font-size:11.5px;
  line-height:1.65;
  color:var(--lg-fraco);
  opacity:.72;
}
.lg-assina strong{ color:var(--lg-meio); font-weight:600; }


/* ═══ os avisos ═══ */
.lg-aviso{ display:none; margin-top:20px; padding:14px 15px;
  border-radius:var(--raio-lg); font-size:13.5px; line-height:1.55; }
.lg-aviso.lg-visivel{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px;
  text-align:left; }
.lg-aviso svg{ width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:2.2; margin-top:2px; flex:none; }
.lg-aviso p{ margin:0; }
.lg-aviso strong{ color:var(--lg-claro); font-weight:600; }
.lg-aviso.lg-ruim{ background:var(--lg-aviso-ruim-fundo); border:1px solid var(--lg-erro);
  color:var(--lg-erro); }
.lg-aviso.lg-espera{ background:var(--lg-aviso-espera-fundo); border:1px solid var(--lg-alerta);
  color:var(--lg-alerta); }
.lg-aviso.lg-certo{ background:var(--lg-aviso-certo-fundo); border:1px solid var(--lg-brote);
  color:var(--lg-marca); }

.lg-guarda{
  margin-top:24px; padding:15px 17px; border-radius:var(--raio-lg); text-align:left;
  background:var(--lg-guarda-fundo); border:1px solid var(--lg-musgo);
  font-size:13.5px; line-height:1.65; color:var(--lg-meio);
}
.lg-guarda strong{ color:var(--lg-claro); font-weight:600; }

.lg-data{
  margin:26px 0 0;
  font-family:var(--font-titulo);
  font-weight:800; font-size:42px; line-height:1;
  letter-spacing:-.045em; color:var(--lg-marca);
  font-variant-numeric:tabular-nums;
}
.lg-data-r{ margin:9px 0 0; font-size:14.5px; color:var(--lg-meio); }

/* ═══ mobile ═══ */
@media (max-width:520px){
  .lg-palco{ padding:24px 16px 76px; align-items:flex-start; }
  .lg-card{ padding:30px 24px 26px; border-radius:18px; }
  .lg-marca-tw{ width:156px; height:156px; }
  .lg-selo{ width:156px; height:156px; }
  .lg-fumaca{ inset:-44px; }
  .lg-google{ margin-top:46px; }
  .lg-titulo{ font-size:25px; }
  .lg-data{ font-size:34px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   O PISO DE TOQUE — na BASE, e por CONTINENTE.

   ⚠️ ESTA REGRA VOLTOU DO PROTÓTIPO ANTERIOR, e a volta é deliberada: o
   protótipo aprovado em 04/09/2026 não a traz, e ela conserta um defeito
   MEDIDO em produção. Escrita dentro de `@media (pointer:coarse)`, ela só
   existia onde alguém foi medir; escrita por lista de seletor, ela não sabia
   dos alvos que ainda não tinham nome.

       "Fale com a gente"   17px no ponteiro fino  (piso 40)
                            33px sob dedo          (piso 44)

   Por continente, alvo novo nasce dentro do piso sem ninguém lembrar. Quem
   MEDE é o navegador — test/telaLoginAlvos.e2e.test.js, 6 telas × 8 larguras
   × 2 ponteiros: casar a linha no CSS prova que ela existe, não que o alvo tem
   a altura depois de herança, `line-height` e caixa de linha.
   ═══════════════════════════════════════════════════════════════════════════ */
.lg-card a,
.lg-card button{ min-height:40px; }

/* O link de texto não é um bloco: `min-height` não se aplica a inline. Ele
   vira `inline-block` e o padding vertical completa o piso, sem mudar onde a
   linha do parágrafo cai. */
.lg-card a{
  display:inline-block;
  line-height:18px;
  padding-block:11px;
}

@media (pointer:coarse){
  .lg-card a,
  .lg-card button{ min-height:44px; }
  .lg-card a{ padding-block:13px; }
  .lg-google, .lg-secundario, .lg-campo input{ min-height:52px; }
  .lg-discreto{ min-height:48px; }
}

/* ⚠️ quem pede menos movimento recebe a rota parada — e ela continua
   sendo o desenho, porque as pedras e a via não dependem da animação */
@media (prefers-reduced-motion:reduce){
  .lg-luz{ animation:none; stroke-dashoffset:0; stroke-dasharray:none; opacity:.3; }
  .lg-pd{ animation:none; opacity:.75; }
  .lg-fumaca i{ animation:none; }
  .lg-marca-tw{ animation:none; }
  *{ transition:none !important; }
}

/* ⚠️ O .lg-palco é flex e centra o card. Escrever `display:block` aqui
   apagava isso — a mesma classe fazendo dois trabalhos, e o segundo
   vencendo. O interruptor mexe na visibilidade, não no display. */
.lg-tela{ display:none; }
.lg-tela.lg-on{ display:flex; }

/* ═══ CENTRADO, INCLUSIVE O RÓTULO ═══
   Este rótulo era o único item alinhado à esquerda — resquício, não
   escolha: o input dentro dele já era text-align:center. */
.lg-campo{ text-align:center; }

/* ═══ A SAÍDA ═══
   ⚠️ ELA TROCA DE COMPORTAMENTO NO CELULAR, e isso é o ponto:

   No DESKTOP é fixa no topo à esquerda — sempre visível, e sobra tela
   de lado sem competir com nada.

   No CELULAR ela deixa de ser fixa e entra no FLUXO, acima do card.
   Fixa no celular sobrepõe: o card das telas de exceção é mais alto que
   a viewport, então ao rolar o conteúdo passa por baixo dela. Estática
   rola junto e nunca encosta.

   O .lg-palco vira coluna para ela ocupar a primeira linha. */
.lg-palco{ flex-direction:column; }
.lg-voltar{
  position:fixed; top:18px; left:18px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  min-height:40px;
  color:var(--lg-meio);
  font-size:13px; font-weight:500; text-decoration:none;
  transition:color .18s ease;
}
.lg-voltar svg{ width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lg-voltar:hover{ color:var(--lg-claro); }
.lg-voltar:focus-visible{ outline:2px solid var(--lg-marca); outline-offset:3px;
  border-radius:8px; }

@media (max-width:760px){
  .lg-voltar{
    position:static; top:auto; left:auto;
    align-self:flex-start;
    margin:0 0 14px;
  }
}


/* ═══ O CADASTRO É A MESMA PORTA ═══
   Cadastro ABERTO com 7 dias de teste. Então esta tela ENTRA e CADASTRA,
   sem perguntar qual dos dois. O sistema descobre: e-mail existe, entra;
   não existe, cria com 7 dias e entra.

   ⚠️ POR QUE UMA TELA SÓ, e não abas "Entrar" e "Criar conta":
   sem senha, cadastrar e entrar são a MESMA operação — valida o e-mail e
   devolve sessão. A única diferença é se a linha já existe no banco, e isso
   o servidor sabe melhor que a pessoa. Duas portas idênticas produzem o
   beco clássico: quem já tem conta clica em "criar" e leva "e-mail já
   cadastrado". Notion, Linear e Vercel convergiram todos para uma porta.

   ⚠️ E POR QUE O NOME NÃO É PEDIDO AQUI:
   a porta serve os dois casos. Um campo de nome obrigaria quem JÁ TEM conta
   a digitar o nome para entrar — absurdo. E "nome (opcional, só se for a
   primeira vez)" transfere para a pessoa uma decisão que o servidor resolve.
   O nome é pedido na tela de BOAS-VINDAS, que só quem é novo vê. Quem entra
   pelo Google nunca vê esse campo: o nome vem do provedor, verificado. */

/* o selo das telas de conteúdo: MESMA arte, menor.
   ⚠️ Não reembutir o base64 — ele já está na regra .lg-selo. Duplicar
   levaria o arquivo de 187 KB para 336 KB pela mesma imagem duas vezes. */
.lg-selo-p{
  display:block; width:112px; height:112px; margin:0 auto 20px;
  border-radius:50%;
  box-shadow:0 14px 30px -12px var(--lg-selo-p-projecao),
             0 0 40px -14px var(--lg-selo-p-halo);
}
@media (max-width:520px){ .lg-selo-p{ width:96px; height:96px; } }

.lg-dica{
  margin-top:14px; font-size:13px; color:var(--lg-meio); line-height:1.55;
}
.lg-dica strong{ color:var(--lg-claro); font-weight:600; }

/* ⚠️ "7 dias grátis" NÃO QUEBRA POR DENTRO. Sem isto o navegador
   deixava o "7" no fim de uma linha e "dias grátis" na seguinte —
   número separado da unidade não se lê, e um "7" solto no fim da
   linha não significa nada. Com nowrap o trecho inteiro desce
   junto quando não cabe. Vale para qualquer par número+unidade. */
.lg-junto{ white-space:nowrap; }


/* o bloco dos 7 dias: informa sem vender */
.lg-teste{
  margin-top:18px; padding:13px 15px;
  border-radius:var(--raio-lg);
  background:var(--lg-teste-fundo);
  border:1px solid var(--lg-teste-borda);
  font-size:13.5px; color:var(--lg-claro); line-height:1.55; text-align:left;
}
.lg-teste b{ color:var(--lg-marca); font-weight:600; }
.lg-teste span{ display:block; color:var(--lg-meio); font-size:12.5px; margin-top:4px; }