/* ── TELA DE ACESSO DA FARMÁCIA (tela dividida) ──
   Usada pelo #tela-login de /app/index.html. Desenho de 29/10/2026, refeito em
   05/11/2026 no modelo de softpaybr.com/auth: o carrossel de telas ilustradas saiu e
   entrou um celular tocando o motion "Stock Pro - Reels 10s"; o painel direito ganhou
   três estados (escolha, entrar, cadastro), trocados pelo login-acesso.js no atributo
   data-estado do .lg-tela. Toda classe começa com lg- e só existe nesta tela.

   Tela de dois painéis:
   - ESQUERDO (>= 1000px): sempre escuro, nos dois temas. Foto escurecida, logo, a
     chamada (texto) e o celular com o vídeo; controles do vídeo embaixo. A divisa é
     uma diagonal feita com clip-path (sem imagem, sem JS).
   - DIREITO: segue o tema do app (var(--surface), --text, --border...).
   Abaixo de 1000px o painel escuro some e sobra só o direito, com o logo colorido.

   Cor fixa só no painel escuro (--lg-*). O painel direito usa só os tokens de
   style.css/theme.css, por isso funciona no tema escuro sem regra extra.
   Tipografia: POPPINS, por decisão do usuário em 29/10/2026 (igual ao login do FroX),
   via <link> no <head>. Sem color-mix(): o Chrome 109 (Windows 7, ainda em balcão)
   não roda. */

.lg-tela {
  /* Marca no painel escuro (paleta do site stockprobr.com: fundo #0f1e16, verde
     vivo #10b981). */
  --lg-fundo: #0f1e16;
  --lg-marca-viva: #10b981;
  --lg-marca-clara: #6ee7b7;
  --lg-texto: #f4faf6;
  --lg-texto-2: rgba(244, 250, 246, .76);
  --lg-texto-sub: rgba(244, 250, 246, .92);
  --lg-linha: rgba(244, 250, 246, .20);
  --lg-botao: rgba(15, 30, 22, .62);
  --lg-botao-hover: rgba(27, 82, 54, .85);

  /* Geometria: x da divisa no topo, e quanto ela recua na base. */
  --lg-corte: min(58vw, calc(100vw - 480px));
  --lg-inclina: 14vh;

  /* Celular: a largura manda, a altura sai da proporção (tela 9:19,5 + moldura).
     31vh garante que ele caiba na altura; 20vw, que sobre lugar para o texto. */
  --cel-w: min(31vh, 20vw);
  --cel-borda: calc(var(--cel-w) * .034);

  --lg-t: clamp(28px, min(2.6vw, 5.2vh), 48px);
  --lg-s: clamp(13px, min(1vw, 2vh), 16px);

  --lg-fonte: Poppins, 'Segoe UI', system-ui, -apple-system, sans-serif;

  font-family: var(--lg-fonte);
  display: grid;
  grid-template-columns: var(--lg-corte) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
}

/* ══ PAINEL ESQUERDO ══════════════════════════════════════════════ */
.lg-esq {
  grid-area: 1 / 1;   /* o HTML traz o formulário primeiro; aqui o painel escuro vai para a esquerda */
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--lg-fundo);
  color: var(--lg-texto);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--lg-inclina)) 100%, 0 100%);
}

/* Foto escurecida (a farmacêutica atendendo). Aqui o celular fica na frente dela,
   então o véu é mais escuro que no desenho de 29/10: a foto vira ambiente, não
   assunto. Só entra a partir de 1000px: no celular o painel nem existe, e o
   navegador não baixa imagem de fundo de regra que não vale. */
@media (min-width: 1000px) {
  .lg-foto {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(ellipse 46% 56% at 74% 50%, rgba(16, 185, 129, .16), rgba(16, 185, 129, 0) 70%),
      linear-gradient(0deg, rgba(11, 23, 16, .9) 0%, rgba(11, 23, 16, 0) 30%),
      linear-gradient(90deg, rgba(15, 30, 22, .95) 0%, rgba(15, 30, 22, .9) 46%, rgba(15, 30, 22, .62) 78%, rgba(15, 30, 22, .5) 100%),
      var(--lg-fundo) url('/assets/hero-farmacia.webp') 62% center / cover no-repeat;
  }
}

.lg-esq-conteudo {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* À direita, a faixa da diagonal: o celular e os botões nunca encostam no corte. */
  padding: clamp(22px, 4.2vh, 44px) calc(var(--lg-inclina) * .92 + 24px) clamp(18px, 3.4vh, 34px) clamp(40px, 4vw, 72px);
}

/* Logo: o mesmo /logo-branco.svg (ícone + "Stock Pro", sem tagline), usado como
   máscara para poder mudar de cor. Branco aqui, verde da marca no painel claro. */
.lg-logo {
  display: block; flex: none;
  width: clamp(124px, 11vw, 168px);
  aspect-ratio: 836 / 228;
  background: currentColor;
  -webkit-mask: url('/logo-branco.svg') no-repeat left center / contain;
  mask: url('/logo-branco.svg') no-repeat left center / contain;
}
.lg-esq .lg-logo { color: #fff; }

/* Meio: a chamada à esquerda, o celular à direita, alinhados ao centro. */
.lg-esq-meio {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cel-w);
  align-items: center;
  column-gap: clamp(24px, 3vw, 52px);
}

.lg-chamada { min-width: 0; }
.lg-chamada-bloco { animation: lg-entra .45s ease both; }
.lg-chamada-bloco[hidden] { display: none; }

.lg-pilula {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px;
  border: 1px solid var(--lg-linha); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--lg-texto);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; line-height: 1;
  margin: 0;
}
.lg-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--lg-marca-viva); flex: none; }

.lg-titulo {
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  font-weight: 700;
  font-size: var(--lg-t); line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}
.lg-destaque { color: var(--lg-marca-clara); }
.lg-sub {
  margin: clamp(12px, 2vh, 18px) 0 0;
  max-width: 30em;
  font-size: var(--lg-s); line-height: 1.6; font-weight: 400;
  color: var(--lg-texto-sub);
}

/* Lista de fatos do sistema (cada um conferido no código antes de entrar aqui). */
.lg-lista {
  list-style: none; margin: clamp(16px, 3vh, 30px) 0 0; padding: 0;
  display: grid; gap: clamp(8px, 1.5vh, 14px);
}
.lg-lista li {
  position: relative; padding-left: 30px;
  font-size: var(--lg-s); line-height: 1.45; color: var(--lg-texto);
}
.lg-lista li::before {
  content: ''; position: absolute; left: 0; top: .12em;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(16, 185, 129, .16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.lg-chips {
  list-style: none; margin: clamp(16px, 3vh, 28px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.lg-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px 0 11px;
  border: 1px solid var(--lg-linha); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px; font-weight: 600; color: var(--lg-texto);
}
.lg-chips li::before {
  content: ''; width: 12px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Celular ──
   Moldura em CSS (a tela sai sempre alinhada, sem imagem torta). A tela é 9:19,5 e o
   vídeo, 9:16: ele entra INTEIRO, centrado, com faixa preta em cima (onde fica a
   câmera) e embaixo, como na referência. Cortar as laterais comeria o texto do
   motion, que encosta na margem. */
.lg-celular-area { margin: 0; display: grid; place-items: center; min-width: 0; }
.lg-celular {
  position: relative;
  width: var(--cel-w);
  aspect-ratio: 9 / 19.5;
  box-sizing: content-box;
  padding: var(--cel-borda);
  border-radius: calc(var(--cel-w) * .17);
  /* Aro de metal claro o bastante para o aparelho se destacar do fundo escuro
     (na primeira versão ele sumia na foto). */
  background: linear-gradient(150deg, #8fb3a0 0%, #3b5246 16%, #1a2620 48%, #3b5246 84%, #8fb3a0 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .34),
    inset 0 0 0 calc(var(--cel-borda) * .42) #070b09,
    0 0 0 1px rgba(110, 231, 183, .28),
    0 44px 90px -30px rgba(0, 0, 0, .85),
    0 0 80px -20px rgba(16, 185, 129, .25);
}
/* Botões laterais: volume à esquerda, power à direita. */
.lg-celular::before, .lg-celular::after {
  content: ''; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #2d3d35, #56705f);
}
.lg-celular::before { left: -2px; top: 22%; height: 11%; box-shadow: 0 calc(var(--cel-w) * .22) 0 #3a4d43; }
.lg-celular::after { right: -2px; top: 28%; height: 15%; background: linear-gradient(270deg, #2d3d35, #56705f); }

.lg-celular-tela {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
  border-radius: calc(var(--cel-w) * .14);
  background: #000;
  transform: translateZ(0);   /* recorte do canto arredondado sem vazar no vídeo */
}
.lg-celular-tela video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.lg-ilha {
  position: absolute; left: 50%; top: calc(var(--cel-borda) + var(--cel-w) * .035);
  width: calc(var(--cel-w) * .3); height: calc(var(--cel-w) * .085);
  transform: translateX(-50%);
  border-radius: 999px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* ── Controles do vídeo (embaixo): barra de tempo na coluna do texto, botões
   na coluna do celular. ── */
.lg-controles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cel-w);
  column-gap: clamp(24px, 3vw, 52px);
  align-items: center;
  margin-top: clamp(12px, 2vh, 20px);
}
.lg-tempo {
  position: relative; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.lg-tempo-barra {
  position: absolute; inset: 0;
  background: #fff; border-radius: inherit;
  transform-origin: left center; transform: scaleX(0);
}
.lg-botoes-video { display: flex; align-items: center; justify-content: center; gap: 10px; }
.lg-pausa, .lg-som {
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--lg-linha);
  background: var(--lg-botao); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 14px/1 var(--lg-fonte);
  cursor: pointer; padding: 0;
  transition: background .15s, transform .15s;
}
.lg-pausa { width: 44px; flex: none; }
.lg-som { padding: 0 18px 0 15px; white-space: nowrap; }
.lg-som-txt { line-height: 1; }   /* o texto troca entre "Ligar" e "Desligar o som" (login-acesso.js) */
.lg-pausa:hover, .lg-som:hover { background: var(--lg-botao-hover); }
.lg-pausa:active, .lg-som:active { transform: scale(.96); }
.lg-pausa svg { width: 16px; height: 16px; }
.lg-som svg { width: 18px; height: 18px; flex: none; }
.lg-pausa .lg-ic-play { display: none; }
.lg-pausa[data-estado="pausado"] .lg-ic-play { display: block; }
.lg-pausa[data-estado="pausado"] .lg-ic-pausa { display: none; }
.lg-som .lg-ic-som { display: none; }
.lg-som[aria-pressed="true"] .lg-ic-som { display: block; }
.lg-som[aria-pressed="true"] .lg-ic-mudo { display: none; }
/* Vídeo que não carregou: fica a capa, sem botões que não fazem nada. */
.lg-sem-video .lg-controles { visibility: hidden; }

/* Foco visível no painel escuro: o anel padrão (verde da marca) some no fundo. */
.lg-tela .lg-esq :is(button, a):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ══ PAINEL DIREITO ═══════════════════════════════════════════════ */
.lg-dir {
  grid-area: 1 / 2;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(18px, 4vh, 48px) clamp(20px, 3.2vw, 56px);
}
.lg-dir-conteudo { width: 100%; max-width: clamp(440px, 28vw, 540px); }

/* Só no celular/tablet estreito: logo colorido + assinatura (texto vivo). */
.lg-topo-mobile { display: none; }
.lg-logo-cor { color: var(--c-marca); }
.lg-assinatura { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* Um estado por vez: [hidden] no <section> não basta se alguma regra der display. */
.lg-passo[hidden] { display: none; }
.lg-passo { animation: lg-entra .32s ease both; }
@keyframes lg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lg-h1 {
  margin: 0 0 clamp(16px, 2.8vh, 26px);
  font-weight: 700;
  font-size: clamp(28px, 2.1vw, 40px); line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  outline: none;   /* recebe foco por programa ao trocar de estado; não é controle */
}

/* Voltar: texto pequeno acima do título, como na referência. */
.lg-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px -6px; padding: 6px;
  background: none; border: 0; border-radius: 8px;
  font: 500 13.5px/1 var(--lg-fonte); color: var(--muted);
  cursor: pointer;
}
.lg-voltar svg { width: 16px; height: 16px; }
.lg-voltar:hover { color: var(--text); background: var(--surface-2); }

/* ── Escolha: dois caminhos ── */
.lg-caminhos { display: grid; gap: 12px; }
.lg-caminho {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 12px 18px;
  border: 1.5px dashed var(--c-borda-forte); border-radius: 14px;
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.lg-caminho:hover { border-color: var(--c-marca-solida); background: rgb(var(--c-marca-rgb) / .05); }
.lg-caminho:active { transform: scale(.99); }
.lg-caminho-principal {
  border-style: solid; border-color: rgb(var(--c-marca-rgb) / .45);
  background: rgb(var(--c-marca-rgb) / .07);
}
.lg-caminho-principal:hover { border-color: var(--c-marca-solida); background: rgb(var(--c-marca-rgb) / .1); }
.lg-caminho .lg-perfil-icone { width: 44px; height: 44px; }
.lg-caminho .lg-seta-dir { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .15s, color .15s; }
.lg-caminho:hover .lg-seta-dir { transform: translateX(3px); color: var(--c-marca); }
.lg-caminho:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.lg-dica { margin: clamp(16px, 2.6vh, 24px) 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.lg-dica strong { color: var(--text); font-weight: 600; }

/* Seletor de perfil (no estado "entrar"): dois <input type="radio"> de verdade,
   com o cartão desenhado no irmão .lg-perfil-corpo. O input fica invisível, mas focável. */
.lg-perfis { border: 0; margin: 0 0 clamp(12px, 2.2vh, 20px); padding: 0; min-width: 0; display: grid; gap: 10px; }
.lg-perfil { position: relative; display: block; cursor: pointer; }
.lg-perfil input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.lg-perfil-corpo {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px 16px;
  border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.lg-perfil:hover .lg-perfil-corpo { border-color: var(--c-borda-forte); }
.lg-perfil input:checked + .lg-perfil-corpo {
  border-color: var(--c-marca-solida);
  background: rgb(var(--c-marca-rgb) / .07);
}
.lg-perfil-icone {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(var(--c-marca-rgb) / .10); color: var(--c-marca);
}
.lg-perfil-icone svg { width: 20px; height: 20px; }
.lg-perfil input:checked + .lg-perfil-corpo .lg-perfil-icone { background: var(--c-marca-solida); color: var(--c-sobre-marca); }
.lg-perfil-textos { flex: 1; min-width: 0; }
.lg-perfil-textos strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
.lg-perfil-textos span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--muted); }
/* "e-mail" nunca quebra no hífen (no celular ficava "e-" / "mail"). */
.lg-nq { display: inline; white-space: nowrap; }
.lg-perfil-textos .lg-nq { display: inline; margin: 0; font-size: inherit; color: inherit; }
.lg-perfil-marca {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--c-borda-forte); background: transparent;
}
.lg-perfil input:checked + .lg-perfil-corpo .lg-perfil-marca {
  border-color: var(--c-marca-solida);
  background: radial-gradient(circle, var(--c-marca-solida) 0 4.5px, transparent 5.5px);
}
/* Escolha travada (?cnpj= na URL): o dono não pode ser escolhido. */
.lg-perfil-travado { opacity: .5; cursor: not-allowed; }
.lg-perfil-travado input { cursor: not-allowed; }
/* O anel de foco vai no cartão, não no input invisível. */
.lg-tela .lg-perfil input:focus-visible { outline: none; }
.lg-perfil input:focus-visible + .lg-perfil-corpo { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Formulários (entrar e cadastro) */
.lg-form .campo { margin: 0 0 12px; text-align: left; min-width: 0; }
.lg-form .campo label {
  margin-bottom: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text);
}
.lg-form .campo input, .lg-form .campo select {
  height: 46px; padding: 0 14px;
  font-size: 15px; border-radius: 10px;
  border-color: var(--c-borda-forte); background: var(--campo-bg); color: var(--text);
}
.lg-form .campo select { padding-right: 32px; }
.lg-form .campo input::placeholder { color: var(--muted); opacity: .75; }
.lg-form .campo input[readonly] { background: var(--surface-2); }
.lg-form .campo [aria-invalid="true"] { border-color: var(--c-perigo); box-shadow: 0 0 0 3px rgb(var(--c-perigo-rgb) / .12); }
.lg-campo-senha {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "rotulo esqueci" "campo campo";
  align-items: baseline; column-gap: 12px;
}
.lg-campo-senha label { grid-area: rotulo; }
.lg-campo-senha .lg-senha { grid-area: campo; }
.lg-senha { position: relative; }
.lg-form .lg-senha input { padding-right: 52px; }
.lg-esqueci {
  grid-area: esqueci; justify-self: end;
  padding: 12px 0; margin: -12px 0 -6px;   /* área de toque maior sem mexer no desenho */
  font-size: 13px; font-weight: 600; color: var(--c-marca);
}
.lg-esqueci:hover { text-decoration: underline; }
.lg-olho {
  position: absolute; top: 0; right: 0; width: 48px; height: 46px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 0 10px 10px 0;
  color: var(--muted); cursor: pointer; padding: 0;
}
.lg-olho:hover { color: var(--text); }
.lg-olho svg { width: 20px; height: 20px; }
.lg-olho .lg-ic-fechado { display: none; }
.lg-olho[aria-pressed="true"] .lg-ic-aberto { display: none; }
.lg-olho[aria-pressed="true"] .lg-ic-fechado { display: block; }
.lg-form .lg-entrar { height: 48px; margin-top: 6px; border-radius: 12px; font-size: 15px; font-family: var(--lg-fonte); font-weight: 600; }

/* "Ainda não tem conta? Criar conta grátis" / "Já tem conta? Entrar" */
.lg-troca { margin: clamp(14px, 2.4vh, 20px) 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.lg-link {
  background: none; border: 0; padding: 4px 2px; margin: -4px 0;
  font: 600 13.5px/1.4 var(--lg-fonte); color: var(--c-marca);
  cursor: pointer;
}
.lg-link:hover { text-decoration: underline; }

/* ── Cadastro: progresso e passos ── */
.lg-progresso { margin: -6px 0 clamp(16px, 2.6vh, 22px); }
.lg-progresso-txt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 8px; font-size: 13px; color: var(--muted);
}
.lg-progresso-nome { font-weight: 600; color: var(--text); }
.lg-progresso-barras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lg-progresso-barras li { height: 4px; border-radius: 2px; background: var(--border); transition: background .25s; }
.lg-progresso-barras li.feito { background: var(--c-marca-solida); }

.lg-cad-etapa { border: 0; margin: 0; padding: 0; min-width: 0; animation: lg-entra .28s ease both; }
.lg-cad-etapa[hidden] { display: none; }
/* Dois campos lado a lado: CNPJ + origem, CEP + número, bairro + complemento. */
.lg-linha2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.lg-linha-uf { grid-template-columns: minmax(0, 1fr) 104px; }
.lg-opcional { font-weight: 400; color: var(--muted); }
.lg-ajuda { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.lg-cep-status { margin: -6px 0 10px; }
.lg-cep-status:empty { display: none; }

/* Regras da senha: viram verdes conforme a pessoa digita. */
.lg-regras { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.lg-regras li {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px 0 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
}
.lg-regras li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .55;
}
.lg-regras li.ok { background: rgb(var(--c-sucesso-rgb) / .12); color: var(--c-sucesso-texto); }
.lg-regras li.ok::before {
  width: 4px; height: 8px; border-radius: 0; opacity: 1; background: none;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg); margin: 0 1px 0 2px;
}

.lg-indicacao { margin: 2px 0 12px; }
.lg-indicacao summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--c-marca);
}
.lg-indicacao summary::-webkit-details-marker { display: none; }
.lg-indicacao summary::before {
  content: '+'; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgb(var(--c-marca-rgb) / .12); font-size: 14px; line-height: 1;
}
.lg-indicacao[open] summary::before { content: '–'; }
.lg-indicacao[open] .campo { margin-top: 8px; }

.lg-check {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  margin: 4px 0 14px; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.lg-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-marca-solida); cursor: pointer; }
.lg-check a { color: var(--c-marca); font-weight: 600; }

.lg-erro {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  background: rgb(var(--c-perigo-rgb) / .1); color: var(--c-perigo-texto);
  font-size: 13px; line-height: 1.5;
}
.lg-erro[hidden] { display: none; }
.lg-erro .lg-link { font-size: 13px; }

.lg-rodape {
  margin-top: clamp(18px, 3.4vh, 34px);
  display: grid; gap: 2px; justify-items: center; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.lg-rodape p { margin: 0; }
.lg-rodape a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.lg-rodape a:hover { color: var(--text); }
.lg-rodape-seguro { display: inline-flex; align-items: center; gap: 6px; }
.lg-rodape-seguro svg { width: 14px; height: 14px; flex: none; }
.lg-rodape-seguro strong { color: var(--text); font-weight: 600; }
.lg-rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }

/* ══ RESPONSIVO ═══════════════════════════════════════════════════ */
/* Tela grande (1600px+): o formulário cresce um pouco, para não parecer perdido. */
@media (min-width: 1600px) {
  .lg-perfil-corpo { min-height: 72px; }
  .lg-caminho { min-height: 84px; }
  .lg-perfil-icone { width: 44px; height: 44px; }
  .lg-caminho .lg-perfil-icone { width: 48px; height: 48px; }
  .lg-perfil-textos strong { font-size: 16px; }
  .lg-perfil-textos span { font-size: 13.5px; }
  .lg-form .campo label { font-size: 14px; }
  .lg-form .campo input, .lg-form .campo select { height: 50px; font-size: 16px; }
  .lg-olho { height: 50px; }
  .lg-form .lg-entrar { height: 52px; font-size: 16px; }
  .lg-esqueci { font-size: 14px; }
  .lg-rodape { font-size: 13.5px; }
}

/* Painel esquerdo estreito (1000 a 1199px): não há lugar para texto longo ao lado do
   celular. Fica a pílula e o título; o subtítulo, a lista e os chips saem. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .lg-tela { --lg-t: clamp(24px, 2.6vw, 30px); --cel-w: min(30vh, 21vw); }
  .lg-sub, .lg-lista, .lg-chips { display: none; }
  .lg-som { padding: 0 14px 0 12px; font-size: 13px; }
}

/* Janela baixa (notebook com barra do navegador): enxuga o formulário para o
   essencial caber sem rolar. */
@media (min-width: 1000px) and (max-height: 720px) {
  .lg-tela { --lg-s: 13px; }
  .lg-esq-conteudo { padding-top: 20px; padding-bottom: 16px; }
  .lg-perfil-corpo { min-height: 56px; padding-block: 7px; }
  .lg-caminho { min-height: 64px; }
  .lg-perfil-icone { width: 36px; height: 36px; }
  .lg-form .campo { margin-bottom: 9px; }
  .lg-form .campo input, .lg-form .campo select { height: 42px; }
  .lg-olho { height: 42px; }
  .lg-form .lg-entrar { height: 44px; }
  .lg-rodape { margin-top: 12px; }
  .lg-h1 { font-size: 28px; margin-bottom: 14px; }
  .lg-perfis { margin-bottom: 10px; gap: 8px; }
  .lg-lista { gap: 6px; }
}
/* Tela muito baixa: sem a lista. */
@media (min-width: 1000px) and (max-height: 600px) {
  .lg-lista, .lg-chips { display: none; }
}

@media (max-width: 999px) {
  .lg-tela { grid-template-columns: minmax(0, 1fr); }
  .lg-esq { display: none; }
  .lg-dir { grid-area: 1 / 1; }
  .lg-dir { justify-content: flex-start; padding: 22px 20px 28px; }
  .lg-topo-mobile { display: block; margin-bottom: 26px; }
  .lg-logo-cor { width: 150px; }
  .lg-h1 { font-size: clamp(24px, 7.4vw, 32px); }
  .lg-form .campo input, .lg-form .campo select { font-size: 16px; }   /* 16px: o iOS não dá zoom ao focar */
  .lg-rodape-links a, .lg-rodape-seguro, #lg-link-suporte { min-height: 44px; display: inline-flex; align-items: center; }
  .lg-rodape-links { gap: 0 8px; }
  .lg-rodape-links a { padding: 0 6px; }
}
/* Celular estreito: só o par CNPJ + origem empilha (o CNPJ mascarado não cabe em meia
   largura); CEP + número, bairro + complemento e cidade + UF continuam lado a lado. */
@media (max-width: 420px) {
  .lg-empilha { grid-template-columns: minmax(0, 1fr); }
  .lg-linha-uf { grid-template-columns: minmax(0, 1fr) 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-passo, .lg-cad-etapa, .lg-chamada-bloco { animation: none; }
  .lg-caminho, .lg-perfil-corpo, .lg-pausa, .lg-som, .lg-regras li { transition: none; }
}