/* ============================================================================
   MEU MEGA · HOLO — A IDENTIDADE DAS PORTAS DE ENTRADA
   ----------------------------------------------------------------------------
   Vale para as SETE portas do sistema, e para qualquer uma que nascer depois:

     /entrar                  login do cliente (CPF/CNPJ)
     /entrar  →  contratos    escolha de contrato, quando há mais de um
     /admin/login             painel administrativo
     /comunidade/entrar       quem não é cliente, entrando
     /comunidade/cadastrar    quem não é cliente, criando conta
     /parceiro                portal do comércio parceiro
     /parceiro/senha          troca da senha inicial do parceiro

   Todas compartilham a mesma marcação (`.login-experience` + `.login-card`),
   então compartilham esta folha. O que as separa é UMA classe de público
   (`login-audience-*`) e, dentro dela, o mínimo que tem motivo para diferir.

   O QUE É O "HOLO"
   ---------------
   Escolhido em 21/08/2026 entre três direções (Holo, Sinal e Fibra), e é o
   mesmo Holo que já tinha vencido a escolha das telas internas do aplicativo
   — a porta e o interior falam a mesma língua desde o primeiro segundo.

   A ideia em uma frase: o formulário não é uma caixa, é um objeto com
   espessura. Três coisas constroem isso, e as três estão neste arquivo:

     1. DUAS CAMADAS FANTASMA atrás do cartão, aparecendo por cima da borda,
        como folhas empilhadas. São desenhadas com `box-shadow`, não com
        elementos — a marcação das sete telas não muda por causa de estilo.
     2. UM FIO IRIDESCENTE de 3px na borda de cima, indo do azul da marca ao
        laranja da marca. É a única peça colorida da tela.
     3. UM REFLEXO que atravessa o cartão devagar, com uma pausa longa entre
        as passagens. Tem que ser notado quando se olha, nunca enquanto se
        digita o CPF.

   O FIO DIZ QUEM ESTÁ ENTRANDO
   ----------------------------
   O degradê do fio muda por público, e a mudança significa alguma coisa:

     cliente     azul → índigo → laranja   a marca inteira, o convite completo
     painel      azul → índigo             sem laranja: ambiente restrito, não
                                           tem nada a oferecer, tem trabalho
     comunidade  índigo → laranja          mais convite que instituição: é a
                                           porta de quem ainda não é cliente
     parceiro    laranja → âmbar           balcão de trabalho, ação em primeiro
                                           plano

   O reflexo só corre no cliente e na Comunidade. Painel e parceiro são telas
   de trabalho: quem abre dez vezes por dia não quer espetáculo.

   ----------------------------------------------------------------------------
   QUATRO COISAS QUE ESTA FOLHA PRECISA VENCER NO app.css
   ------------------------------------------------------
   Registrado porque as primeiras versões erraram justamente nisso:

   1. `.login-experience` tem `background:#fff`. Pintar só o cartão de dentro
      deixa uma placa branca em volta e a marca ilegível. O painel externo é
      repintado aqui.

   2. `.login-experience-brand` tem `display:none` no app.css — quem o mostrava
      eram as variantes Clean/Split/Impact, que deixaram de existir na 3.54.0.
      Sem a regra de `display:block` abaixo, A LOGO SOME DE TODAS AS PORTAS.

   3. Os campos são travados por `!important` no app.css (especificidade
      0,3,1). Para escurecê-los é preciso `!important` E especificidade maior —
      daí o `.login-experience` a mais no seletor, chegando a 0,4,1. Inclui
      `-webkit-text-fill-color` e o preenchimento automático, senão o Safari e
      o Chrome repintam de branco quando o usuário aceita o CPF salvo.

   4. `.login-security-note span` e `strong` têm cor própria (cinza e azul,
      feitas para fundo claro). Pintar só o contêiner não alcança o texto.

   E A REGRA QUE NÃO SE QUEBRA
   ---------------------------
   A LOGO COLORIDA PRECISA DE FUNDO CLARO. As letras de "mega" são azul
   #2E3092; soltas sobre o fundo escuro elas praticamente desaparecem. A
   solução é a placa branca sob a logo (`.login-brand-lockup`), que é como se
   usa marca de cor chapada sobre fundo escuro. A 3.31.0 tentou o outro
   caminho — trocar a logo pelo símbolo "m" + wifi da versão escura — e foi
   reprovado por descaracterizar a marca. Não voltar a esse caminho.

   COMO CRIAR A OITAVA PORTA
   -------------------------
   Na view: `<section class="login-experience login-audience-XXX">`, um
   `.login-experience-brand` com o lockup da logo dentro, e um `.login-card`
   com o formulário. No controller: `publicBodyClass` contendo
   `login-experience-page`. Escolha o fio do público novo no bloco PÚBLICOS.
   Nada mais.
   ============================================================================ */

body.public-body.login-mega{
  /* ---- marca ----
     O azul #2E3092 e o laranja #FF6600 saem do arquivo da logo. Eles aparecem
     escritos por extenso nos degradês do fio, mais abaixo, porque lá cada um
     ocupa uma posição diferente da faixa e a variável não ajudaria a ler. */
  --l-act:#FF6600;
  --l-act-lt:#FF8A3D;
  --l-act-grad:linear-gradient(142deg,#FF8A3D,#FF6600 46%,#E05A00);

  /* ---- fundo da página: do azul da marca ao quase-preto ---- */
  --l-bg-top:#141637;
  --l-bg:#0C0D22;
  --l-bg-deep:#07081A;

  /* ---- o objeto ---- */
  --l-card:linear-gradient(168deg,#1D2048,#161939 58%,#12142E);
  --l-fio:linear-gradient(90deg,#2E3092,#6C6EE0 46%,#FF8A3D);
  --l-camada-2:#1A1D42;
  --l-camada-3:#161934;
  --l-edge:rgba(184,188,255,.20);        /* fio de luz do cartão */
  /* Borda de campo e de botão. A opacidade NÃO é escolha de gosto: o fundo do
     campo (#090A20) e o do cartão diferem em apenas 1,08 para 1, então a borda
     é a única coisa que diz onde o campo começa. Medida a 0,48 ela chega a
     3,10 para 1 no pior fundo — o mínimo que a norma pede para o contorno de
     um controle. Abaixar isso apaga o campo em tela de celular no sol. */
  --l-edge-in:rgba(184,188,255,.48);
  --l-campo:#090A20;

  /* ---- texto ---- */
  --l-ink:#F3F4FF;
  --l-dim:#C2C5F0;
  --l-dimmer:#9EA2D4;

  color-scheme:dark;
  color:var(--l-ink);
  background:
    radial-gradient(58% 32% at 14% 8%, rgba(255,102,0,.10), transparent 62%),
    radial-gradient(54% 34% at 84% 26%, rgba(78,81,198,.22), transparent 64%),
    linear-gradient(180deg, var(--l-bg-top) 0%, var(--l-bg) 46%, var(--l-bg-deep) 100%);
  background-attachment:fixed;
  min-height:100vh;
}

/* O app.css marca o fundo da página com `!important` (`.login-experience-page`),
   então o nosso precisa do mesmo peso.

   ATENÇÃO AO `background-size`: o app.css declara `auto,auto,54px 54px` também
   com `!important`, porque a terceira camada dele é um padrão de listras
   diagonais de 54 pixels. Trocar só a imagem e esquecer o tamanho faz a NOSSA
   terceira camada — o degradê da página inteira — virar um ladrilho de 54
   pixels, e a tela ganha faixas horizontais de cima a baixo. Aconteceu de
   verdade. As três propriedades andam juntas. */
body.public-body.login-mega.login-experience-page,
body.public-body.login-mega.login-entrada{
  background-image:
    radial-gradient(58% 32% at 14% 8%, rgba(255,102,0,.10), transparent 62%),
    radial-gradient(54% 34% at 84% 26%, rgba(78,81,198,.22), transparent 64%),
    linear-gradient(180deg, var(--l-bg-top) 0%, var(--l-bg) 46%, var(--l-bg-deep) 100%) !important;
  background-size:auto,auto,auto !important;
  background-repeat:no-repeat !important;
  background-color:var(--l-bg) !important;
}

/* O `html` continua cinza-claro (#F6F7F9) por baixo. Com o fundo do body fixo,
   esse cinza aparece no "esticão" de rolagem do iPhone e em qualquer tela mais
   alta que o visor. Pintar a raiz também. */
html:has(> body.public-body.login-mega){
  background:#07081A;  /* literal de propósito: as variáveis vivem no body */
  color-scheme:dark;
}

/* ---- atmosfera: profundidade atrás de tudo -------------------------------
   Três feixes de luz muito difusos, deslocando devagar. Ciclo longo de
   propósito: o movimento é ambiente, não animação. */
body.public-body.login-mega::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(10px 220px at 17% 22%, rgba(255,102,0,.34), transparent 70%),
    radial-gradient(10px 240px at 53% 56%, rgba(108,110,224,.34), transparent 70%),
    radial-gradient(10px 200px at 82% 36%, rgba(255,138,61,.24), transparent 70%);
  filter:blur(10px);
  animation:l-atmosfera 44s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes l-atmosfera{
  0%   {transform:translate3d(0,-13vh,0) scaleY(1)}
  100% {transform:translate3d(0, 13vh,0) scaleY(1.18)}
}

/* Grão: corrige as faixas horizontais que todo degradê escuro produz em tela
   de celular mais simples. */
body.public-body.login-mega::after{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.26; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.public-body.login-mega .public-shell{position:relative; z-index:1}

/* ============================================================================
   O PAINEL EXTERNO: deixa de ser uma placa branca
   ============================================================================ */
body.public-body.login-mega .login-experience{
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  color:var(--l-ink);
  max-width:520px;
  margin-inline:auto;
}
body.public-body.login-mega .login-experience-main{background:transparent}

/* ---- a marca --------------------------------------------------------------
   Desde a 3.54.0 o bloco da marca é SÓ a logo. O que ele dizia antes — o
   sobretítulo, o título e as pílulas de recurso — virava eco do que o cartão
   já diz duas linhas abaixo, e empurrava o campo de CPF para fora da primeira
   tela do celular. Quem chega numa tela de login quer entrar.

   O `display:block` aqui não é enfeite: sem ele a logo some (ver item 2 do
   cabeçalho). */
body.public-body.login-mega .login-experience-brand{
  display:block;
  background:transparent;
  color:var(--l-ink);
  /* 18px de lado, não 28px: é a medida que o app.css usa no `.login-experience-main`
     no celular, e a placa da logo tem que nascer na mesma vertical da borda
     esquerda do cartão. Dez pixels de diferença entre os dois não parecem erro
     de estilo, parecem erro de montagem. */
  padding:30px 18px 0;
  overflow:visible;
}
body.public-body.login-mega .login-experience-brand:after{content:none}
body.public-body.login-mega .login-brand-lockup{
  display:inline-block;
  background:#FFFFFF;
  padding:11px 16px;
  border-radius:14px;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.10);
  margin:0;
  line-height:0;
}
body.public-body.login-mega .login-experience-brand img{
  display:block;
  width:158px; height:auto; margin:0;
}

/* A logo do topo do layout sai das telas que já têm marca própria: duas logos
   na mesma tela é erro, não reforço. */
body.public-body.login-mega > .public-shell > a > img.brand-logo{display:none}

/* A EXCEÇÃO: a escolha de contrato não tem bloco de marca próprio, então a logo
   do layout é a única que existe ali — esconder deixaria a tela anônima. Ganha
   a mesma placa branca das outras.

   Para quem for criar a próxima porta: se a sua view já traz um
   `.login-brand-lockup`, não faça nada. Só entre nesta lista se a tela NÃO
   tiver marca própria, senão a logo aparece duas vezes. */
body.public-body.login-mega.login-entrada.login-audience-customer-page > .public-shell > a{
  display:inline-block;
  background:#FFFFFF;
  padding:11px 16px;
  margin-bottom:18px;
  border-radius:14px;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.10);
}
body.public-body.login-mega.login-entrada.login-audience-customer-page > .public-shell > a > img.brand-logo{
  display:block; width:150px; height:auto; margin:0;
}

/* ============================================================================
   O CARTÃO COMO OBJETO — o coração do Holo
   ----------------------------------------------------------------------------
   As duas camadas de trás são `box-shadow`, e a ordem importa: a sombra
   listada primeiro é desenhada por cima. Cada camada usa DUAS sombras — o
   preenchimento e, logo atrás dele, a mesma sombra com 1px a mais de
   espalhamento, que aparece como o fio de luz da borda.

   O deslocamento negativo em Y sobe a camada; o espalhamento negativo a
   encolhe dos lados. É o que produz a pilha vista de frente.
   ============================================================================ */
body.public-body.login-mega .login-card{
  position:relative;
  overflow:hidden;
  margin-top:26px;
  border:1px solid var(--l-edge);
  border-radius:22px;
  color:var(--l-ink);
  background:var(--l-fio) top left/100% 3px no-repeat, var(--l-card);
  background-origin:border-box;
  box-shadow:
    0 -10px 0 -6px  var(--l-camada-2),
    0 -10px 0 -5px  rgba(184,188,255,.15),
    0 -19px 0 -12px var(--l-camada-3),
    0 -19px 0 -11px rgba(184,188,255,.10),
    0 26px 52px -26px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* O reflexo. Pausa longa, passagem rápida: é assim que luz atravessa um objeto
   de verdade, e é o que impede a animação de virar um piscar constante ao lado
   do campo que a pessoa está preenchendo. */
body.public-body.login-mega .login-card::after{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.075) 50%,transparent 66%);
  transform:translateX(-140%);
  animation:l-reflexo 9s ease-in-out infinite;
}
@keyframes l-reflexo{
  0%,74%{transform:translateX(-140%)}
  100%  {transform:translateX(140%)}
}
body.public-body.login-mega .login-card > *{position:relative; z-index:2}

body.public-body.login-mega .login-card .eyebrow{color:var(--l-act-lt); font-weight:800}
body.public-body.login-mega .login-card h1{color:var(--l-ink); letter-spacing:-.03em}
body.public-body.login-mega .login-card p{color:var(--l-dim)}

/* ============================================================================
   PÚBLICOS — uma classe muda o fio, e o fio diz quem está entrando
   ============================================================================ */
body.public-body.login-mega .login-audience-customer{
  --l-fio:linear-gradient(90deg,#2E3092,#6C6EE0 46%,#FF8A3D);
}
body.public-body.login-mega .login-audience-community{
  --l-fio:linear-gradient(90deg,#4B4EA8,#6C6EE0 34%,#FF6600);
}
body.public-body.login-mega .login-audience-partner{
  --l-fio:linear-gradient(90deg,#E05A00,#FF8A3D 55%,#FFC08A);
}
/* O painel: mesma construção, sem laranja e sem reflexo. A superfície é mais
   fria de propósito — quem entra ali é a equipe, e a tela precisa parecer o que
   é: ambiente restrito, não vitrine. */
body.public-body.login-mega .login-audience-admin{
  --l-fio:linear-gradient(90deg,#23255E,#4B4EA8 52%,#6C6EE0);
  --l-card:linear-gradient(168deg,#181A3B,#131530 58%,#0F1127);
}
body.public-body.login-mega .login-audience-admin .login-card::after,
body.public-body.login-mega .login-audience-partner .login-card::after{content:none}
body.public-body.login-mega .login-audience-admin .login-card .eyebrow{
  color:var(--l-dim); letter-spacing:.2em;
}

/* ============================================================================
   CAMPOS
   Especificidade 0,4,1 + `!important` para vencer o app.css (item 3 acima).
   ============================================================================ */
body.public-body.login-mega .login-experience .form-stack input,
body.public-body.login-mega .login-experience .form-stack select{
  /* 16px NÃO é escolha de estilo: é o que impede o iPhone de dar zoom sozinho
     quando o dedo toca no campo. O Safari do iOS amplia a tela em qualquer
     campo com letra menor que 16 pixels, e a tela fica "presa" ampliada depois
     de digitar. A outra saída conhecida — travar o zoom no `viewport` com
     `maximum-scale=1` — resolveria o incômodo tirando de quem tem baixa visão
     a capacidade de ampliar a página. Não se faz isso. */
  font-size:16px !important;
  background:var(--l-campo) !important;
  border:1px solid var(--l-edge-in) !important;
  color:var(--l-ink) !important;
  -webkit-text-fill-color:var(--l-ink) !important;
  caret-color:var(--l-act-lt) !important;
  border-radius:13px;
}
body.public-body.login-mega .login-experience .form-stack input::placeholder{
  color:var(--l-dimmer) !important;
  -webkit-text-fill-color:var(--l-dimmer) !important;
  opacity:1 !important;
}
body.public-body.login-mega .login-experience .form-stack input:focus,
body.public-body.login-mega .login-experience .form-stack select:focus{
  background:var(--l-campo) !important;
  border-color:var(--l-act-lt) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(255,102,0,.22);
}
/* Preenchimento automático: sem isto o navegador repinta o campo de branco e
   escreve em cinza claro, o que some. O truque da sombra interna é o único
   jeito de trocar o fundo do autofill. */
body.public-body.login-mega .login-experience .form-stack input:-webkit-autofill,
body.public-body.login-mega .login-experience .form-stack input:-webkit-autofill:hover,
body.public-body.login-mega .login-experience .form-stack input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--l-ink) !important;
  caret-color:var(--l-ink) !important;
  box-shadow:0 0 0 1000px var(--l-campo) inset !important;
  border-color:var(--l-edge-in) !important;
}
body.public-body.login-mega .login-card label,
body.public-body.login-mega .login-experience .form-stack label{color:var(--l-dim); font-weight:650}
body.public-body.login-mega .field-help,
body.public-body.login-mega .login-experience .field-help{color:var(--l-dimmer)}

/* O campo-armadilha para robô continua invisível. */
body.public-body.login-mega .bot-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---- botão ---------------------------------------------------------------- */
body.public-body.login-mega .login-card .btn,
body.public-body.login-mega .login-card .btn-primary{
  background:var(--l-act-grad);
  color:#241000;
  border:none;
  border-radius:14px;
  font-weight:800;
  box-shadow:0 6px 16px -5px rgba(224,90,0,.6);
}
body.public-body.login-mega .login-card .btn:active{transform:translateY(1px)}

/* ---- aviso de segurança ---------------------------------------------------
   `span` e `strong` têm cor própria no app.css (item 4). Alcançados um a um. */
body.public-body.login-mega .login-security-note{
  background:rgba(255,255,255,.045);
  border:1px solid var(--l-edge);
  border-radius:15px;
  color:var(--l-dim);
}
body.public-body.login-mega .login-security-note strong,
body.public-body.login-mega .login-experience .login-security-note strong{color:var(--l-ink)}
body.public-body.login-mega .login-security-note span,
body.public-body.login-mega .login-experience .login-security-note span{color:var(--l-dim)}

/* ---- mensagens ------------------------------------------------------------- */
body.public-body.login-mega .alert{border:1px solid transparent; border-radius:15px}
body.public-body.login-mega .alert-error{
  background:linear-gradient(160deg,#3E1C22,#31171C); border-color:#6A2C35; color:#FFB0B8;
}
body.public-body.login-mega .alert-success{
  background:linear-gradient(160deg,#183D28,#12301F); border-color:#2A6042; color:#8FE3B4;
}
body.public-body.login-mega .alert-info{
  background:linear-gradient(160deg,#222461,#191B4A); border-color:#3E41A8; color:#C3C5FF;
}
body.public-body.login-mega .alert-warning{
  background:linear-gradient(160deg,#3E301C,#2E2417); border-color:#604926; color:#FFDCA8;
}

/* ============================================================================
   ESCOLHER CONTRATO — o passo seguinte de quem tem mais de um contrato
   ----------------------------------------------------------------------------
   Está aqui porque é o mesmo fluxo: quem digita o CPF numa tela escura não pode
   cair numa tela clara no passo seguinte. O cartão já é `.login-card`, então
   herda a espessura e o fio; o que falta são os botões de escolha.
   ============================================================================ */
body.public-body.login-mega .contract-choice{
  background:rgba(255,255,255,.05);
  border:1px solid var(--l-edge-in);
  border-radius:16px;
  color:var(--l-ink);
}
body.public-body.login-mega .contract-choice:hover{
  border-color:var(--l-act-lt);
  background:rgba(255,102,0,.09);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.85);
}
body.public-body.login-mega .contract-choice small{color:var(--l-dimmer)}
body.public-body.login-mega .contract-choice strong{color:var(--l-ink)}
body.public-body.login-mega .contract-choice em{color:var(--l-dim)}
body.public-body.login-mega .contract-choice b{color:var(--l-act-lt)}
body.public-body.login-mega .text-link{color:var(--l-act-lt)}

/* ============================================================================
   COMUNIDADE — a porta de quem ainda não é cliente
   ============================================================================ */

/* O aceite de contato comercial. Fica visualmente separado dos campos porque é
   uma decisão, não um dado — e porque marcar sem perceber não é aceite. */
body.public-body.login-mega .community-consent{
  display:flex;
  align-items:flex-start;
  gap:11px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--l-edge);
  border-radius:15px;
  padding:13px 14px;
  color:var(--l-dim);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
}
body.public-body.login-mega .community-consent input[type=checkbox]{
  width:20px; height:20px;
  margin:1px 0 0;
  flex:0 0 auto;
  accent-color:var(--l-act);
}
body.public-body.login-mega .community-consent b{color:var(--l-ink); font-weight:700}

/* ---- a porta secundária dentro do login do cliente -------------------------
   Quem não é cliente precisa achar o caminho sozinho, mas a tela existe para o
   CPF. Por isso este bloco vem DEPOIS do formulário, separado por um fio, com
   um botão de contorno — presente, achável, e sem competir com o campo de CPF
   nem com o botão laranja de Continuar. */
body.public-body.login-mega .login-alt-entry{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--l-edge);
  display:grid;
  gap:7px;
}
body.public-body.login-mega .login-alt-entry strong{color:var(--l-ink); font-size:14px}
body.public-body.login-mega .login-alt-entry span{color:var(--l-dim); font-size:13px; line-height:1.5}
body.public-body.login-mega .login-card .btn-quiet{
  margin-top:5px;
  justify-self:start;
  background:transparent;
  border:1px solid var(--l-edge-in);
  color:var(--l-act-lt);
  border-radius:13px;
  padding:11px 16px;
  font-weight:750;
  font-size:14px;
  text-decoration:none;
  display:inline-block;
  box-shadow:none;
}
body.public-body.login-mega .login-card .btn-quiet:hover{
  border-color:var(--l-act-lt);
  background:rgba(255,102,0,.10);
}

/* Convite para quem chegou na porta errada: é cliente e caiu na Comunidade.
   Mandar a pessoa para o lugar certo vale mais que a simetria. */
body.public-body.login-mega .community-customer-hint{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--l-edge);
  color:var(--l-dimmer);
  font-size:13px;
  line-height:1.5;
}

/* ---- rodapé e links -------------------------------------------------------- */
body.public-body.login-mega .footer-line{color:var(--l-dimmer)}
body.public-body.login-mega .footer-line a{color:var(--l-act-lt)}
body.public-body.login-mega a{color:var(--l-act-lt)}

/* ---- foco visível ---------------------------------------------------------
   Anel branco com auréola escura: é a única cor que contrasta ao mesmo tempo
   sobre o azul escuro do fundo e sobre o botão laranja. */
body.public-body.login-mega a:focus-visible,
body.public-body.login-mega button:focus-visible,
body.public-body.login-mega input:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(7,8,26,.85);
  border-radius:8px;
}
body.public-body.login-mega .login-card .btn:focus-visible{
  outline:3px solid #14061F;
  box-shadow:0 0 0 6px rgba(255,255,255,.92);
}
body.public-body.login-mega .skip-link:focus{background:var(--l-act); color:#241000}

/* ============================================================================
   COMPUTADOR: a tela de entrada não pode ser o celular esticado
   ----------------------------------------------------------------------------
   Em tela grande o cartão ganha largura de leitura (o olho percorre mal linhas
   muito longas), fica centralizado com a marca acima, e o fundo passa a ter
   presença — é ele que dá o ar de produto, não o cartão.

   No celular nada muda: as medidas abaixo só entram a partir de 760px.
   ============================================================================ */
@media (min-width:760px){
  body.public-body.login-mega.login-experience-page .public-shell,
  body.public-body.login-mega.login-entrada .public-shell{
    width:min(520px,100%);
    display:grid;
    place-content:center;
    min-height:100vh;
    padding-block:40px;
  }
  body.public-body.login-mega .login-experience-brand{
    padding:0 0 4px;
    text-align:center;
  }
  body.public-body.login-mega .login-brand-lockup{margin-inline:auto}
  body.public-body.login-mega .login-experience-main{padding:0}
  body.public-body.login-mega .login-card{padding:32px; margin-top:30px}
  body.public-body.login-mega .login-card h1{font-size:27px}
}

/* ============================================================================
   MOVIMENTO REDUZIDO
   Quem pediu ao sistema para parar animações não recebe nem a atmosfera nem o
   reflexo. A espessura e o fio ficam — não se mexem, então não incomodam.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  body.public-body.login-mega::before{animation:none}
  body.public-body.login-mega .login-card::after{content:none}
}