/* ============================================================
   REDESIGN LOGIN — REPFORM
   Carregado SÓ por web/login.html e web/redefinir-senha.html, depois de
   css/estilo.css. Vive em arquivo separado (e não dentro do estilo.css)
   porque só essas duas páginas usam: o estilo.css é o design system do
   app logado e não deve carregar ~950 linhas que nenhuma tela dele usa.

   Tudo aqui é aditivo — sobrescreve o bloco .auth-* do estilo.css via
   `.rep-login` no elemento pai, sem apagar nada. Tirar a classe
   `rep-login` do .auth-wrap faz as duas páginas voltarem ao layout antigo.

   Origem: veio de uma rodada de protótipos HTML soltos na raiz do repo
   (web-login-redesign-*.html), usados só pro Felipe aprovar o visual antes
   de encostar nos arquivos reais. A linhagem foi: proposta do GPT-5/Sol →
   ajustes de feedback → consolidação com os elementos que ele aprovou da
   proposta do Kimi → variação mobile. Os protótipos foram apagados no mesmo
   commit que trouxe este arquivo, já que o resultado deles é exatamente o
   que está aqui — não existe mais nenhum arquivo de referência pra
   consultar, só o histórico do git.

   Mudanças em relação à proposta original do GPT-5/Sol:
   - Removido selo "Sistema operacional", manchas de luz (glow/radial)
     e flutuação dos cards de produto (feedback anterior).
   - Subtítulo do card agora roda entre algumas palavras (padrão que
     o Felipe gostou na proposta do Kimi).
   - "Esqueci minha senha" mudou de lugar: agora fica abaixo do campo
     de senha (junto com "Lembrar de mim"), não mais colado no rótulo.
   - Botão "Entrar" trocado de amarelo pra azul (gradiente), igual ao
     botão que o Felipe gostou na proposta do Kimi.
   - Rodapé com crédito "Um produto FORM Gestão e Tecnologia" +
     Termos/Privacidade (links placeholder — páginas ainda não existem).
   - Mobile: o painel visual (hero grande) não aparece mais antes do
     formulário — só uma barra fina com a logo, pra não precisar
     rolar a tela pra chegar no login.
   ============================================================ */

.auth-wrap.rep-login{
  --login-navy:#071C33;
  --login-navy-2:#0D2B52;
  --login-blue:#1E6FD9;
  --login-blue-2:#2E86FF;
  --login-blue-deep:#124A99;
  --login-blue-light:#60A5FA;
  --login-wordmark:#38BDF8;
  --login-yellow:#FFD400;
  --login-text:#122033;
  --login-sub:#617083;
  --login-border:#DCE4EE;

  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);
  overflow:hidden;
  background:#F5F7FA;
}

/* ------------------------------
   Painel visual
   ------------------------------ */

.rep-login .auth-visual{
  position:relative;
  min-width:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:30px;
  padding:38px clamp(38px,5vw,76px) 34px;
  overflow:hidden;
  text-align:left;
  color:#fff;
  background:linear-gradient(145deg,var(--login-navy) 0%,var(--login-navy-2) 56%,#113F75 100%);
}

/* Grid tecnológico de fundo — sutil, não é "mancha de luz" (gradiente
   difuso), é textura de linhas finas; mantido por não ter sido citado
   no feedback. */
.rep-login .auth-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}

.rep-visual-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:24px;
}

/* Cena de fundo do mobile — grid técnico + partículas flutuando, MESMA
   ideia da proposta do Kimi, sem a linha de scan e sem o "R" fantasma
   gigante (cortados por pedido do Felipe). Fica display:none no desktop
   (que mantém o hero de sempre, sem essa cena) e vira o pano de fundo
   inteiro no mobile — não existe mais "topbar" com cor própria, a marca
   só senta direto nessa atmosfera. */
.rep-mobile-scene{
  display:none;
}

@media(max-width:859px){
  .rep-mobile-scene{
    display:block;
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    background:linear-gradient(180deg,#0A1830 0%,#071120 55%,#050C18 100%);
  }

  .rep-mobile-grid{
    position:absolute;
    inset:-60px;
    background-image:
      linear-gradient(rgba(120,170,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(120,170,255,.045) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:radial-gradient(85% 60% at 50% 30%,#000 30%,transparent 100%);
    -webkit-mask-image:radial-gradient(85% 60% at 50% 30%,#000 30%,transparent 100%);
  }

  .rep-mobile-particles{
    position:absolute;
    inset:0;
  }

  .rep-mobile-particles span{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(147,197,253,.85),rgba(147,197,253,0) 70%);
    animation:rep-particle-float linear infinite alternate;
  }

  @keyframes rep-particle-float{
    to{transform:translateY(-46px);}
  }

  @media(prefers-reduced-motion:reduce){
    .rep-mobile-particles span{
      animation:none;
    }
  }
}

/*
  Sem card, sem fundo, sem brilho atrás — só as formas. O PNG usado aqui
  (icon-mark-dark.png) é SÓ o glifo R em branco com fundo TRANSPARENTE
  (as barras que no desenho original eram "recorte"/negativo já saem
  removidas do arquivo, não coloridas de branco por cima de nada) — por
  isso já lê direto sobre o painel escuro sem precisar de nenhum tipo de
  fundo. "RepFORM" é texto HTML normal ao lado, não faz parte da imagem.
*/
.rep-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

/* ATENÇÃO ao mexer nestes valores — aqui mora o bug que travou três rodadas
   de ajuste da logo.

   Comentários antigos (e a memória do projeto) afirmavam "glifo QUADRADO
   1:1, proporção confirmada". Isso era falso: a medição tinha sido feita
   sobre as DIMENSÕES DO ARQUIVO (icon-mark-dark.png = 1328×1300, de fato
   quase quadrado), não sobre o desenho dentro dele. O glifo real ocupa só
   463×650 no centro do arquivo — 0,71:1, bem mais alto que largo — cercado
   por ~65% de padding transparente em cada lado.

   Consequência prática: `height:72px` naquele arquivo renderizava um glifo
   de 36px de altura numa caixa de 73px. Cada pedido de "MAIOR" subia o
   número e metade do aumento virava ar — e o padding invisível ainda comia
   orçamento vertical no mobile, criando um falso conflito com o requisito
   de "login sem rolagem".

   Solução: usar o asset recortado (`icon-mark-dark-trim.png`, gerado com
   Pillow a partir do bbox alpha do original, arte pura 463×650, zero
   padding). Com ele, `height:N` entrega N pixels de glifo de verdade — os
   valores abaixo são altura REAL do desenho, não da caixa.

   `width:auto` mantém a proporção nativa 0,71:1 em todo breakpoint, então
   o CSS não tem como reintroduzir o esticamento que já foi corrigido no
   export. Nunca fixe height E width juntos aqui. */
.rep-brand-icon{
  display:block;
  height:78px;
  width:auto;
}

/* Wordmark em texto HTML (não faz parte do PNG), então fonte e cor são
   ajustáveis — que é justamente o motivo de ele não estar embutido na
   imagem: o "Rep" do lockup original é #104862, um azul apagado que o
   Felipe não quis e que seria impossível trocar se estivesse no arquivo.

   Space Grotesk no lugar do Inter: grotesca geométrica de terminais
   retos, mesma lógica de construção do glifo (blocos monoline em ângulo
   reto). O Inter é neutro demais pra funcionar como marca ao lado dele. */
.rep-brand-text{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  white-space:nowrap;
}

/* Cor do "Rep". Isolada numa variável de propósito: é a decisão mais
   subjetiva do lockup e a que mais provavelmente vai mudar — trocar aqui
   muda nas duas páginas de uma vez. O valor antigo era --login-blue-light
   (#60A5FA), o "azul claro" que o Felipe reprovou. */
.rep-brand-accent{
  color:var(--login-wordmark);
}

.rep-hero{
  position:relative;
  z-index:2;
  width:100%;
  max-width:640px;
  margin:auto 0;
}

.rep-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  color:var(--login-yellow);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.rep-eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  border-radius:2px;
  background:var(--login-yellow);
  box-shadow:0 0 14px rgba(255,212,0,.7);
}

.rep-hero-title{
  max-width:620px;
  margin:0;
  color:#fff;
  font-size:clamp(32px,3.8vw,56px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.05em;
}

.rep-hero-title span{
  color:var(--login-yellow);
}

.rep-hero-copy{
  max-width:490px;
  margin-top:18px;
  color:rgba(255,255,255,.68);
  font-size:15px;
  line-height:1.7;
}

/* ------------------------------
   Demonstração visual do produto
   ------------------------------ */

.rep-product-scene{
  position:relative;
  z-index:2;
  width:min(100%,620px);
  height:264px;
  margin-top:34px;
}

.rep-product-card{
  position:absolute;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,31,57,.7);
  box-shadow:0 25px 70px rgba(0,0,0,.3);
  backdrop-filter:blur(18px);
}

/* Sem animação de flutuação (era rep-card-float) — cards ficam parados,
   por pedido do Felipe. */
.rep-product-main{
  inset:0 42px 0 0;
  padding:18px;
  border-radius:20px;
}

/* Ficava sobreposto ao card principal (feedback do Felipe) — desceu pra
   fora da faixa de conteúdo do card de cima, só encostando na quina. */
.rep-product-mini{
  right:0;
  bottom:-24px;
  width:178px;
  padding:14px;
  border-radius:16px;
  background:rgba(16,55,96,.92);
}

.rep-product-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.rep-product-symbol{
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border-radius:9px;
  background:var(--login-blue);
  color:#fff;
}

.rep-product-title{
  color:#fff;
  font-size:12px;
  font-weight:750;
}

.rep-product-sub{
  margin-top:2px;
  color:rgba(255,255,255,.45);
  font-size:9px;
}

.rep-product-number{
  margin-left:auto;
  color:rgba(255,255,255,.48);
  font-size:9px;
  font-weight:700;
}

.rep-stage-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:14px;
}

.rep-stage{
  position:relative;
  min-width:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.055);
}

.rep-stage::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:2px;
  border-radius:3px;
  background:var(--stage-color,var(--login-blue));
  box-shadow:0 0 13px var(--stage-color,var(--login-blue));
}

.rep-stage:nth-child(2){
  --stage-color:var(--login-yellow);
}

.rep-stage:nth-child(3){
  --stage-color:#5BE38D;
}

.rep-stage-label{
  color:rgba(255,255,255,.45);
  font-size:8px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.rep-stage-value{
  margin-top:7px;
  color:#fff;
  font-size:18px;
  font-weight:800;
}

.rep-progress{
  height:6px;
  margin-top:18px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.rep-progress span{
  display:block;
  width:74%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--login-blue),#67B3FF);
  box-shadow:0 0 15px rgba(30,111,217,.75);
}

.rep-product-caption{
  display:flex;
  justify-content:space-between;
  margin-top:7px;
  color:rgba(255,255,255,.43);
  font-size:8px;
}

.rep-mini-label{
  color:rgba(255,255,255,.5);
  font-size:8px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.rep-mini-value{
  margin-top:5px;
  color:#fff;
  font-size:21px;
  font-weight:800;
}

.rep-mini-positive{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:7px;
  color:#79E8A1;
  font-size:9px;
  font-weight:700;
}

.rep-visual-footer{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.4);
  font-size:10px;
}

.rep-trust{
  display:flex;
  align-items:center;
  gap:7px;
}

.rep-trust svg{
  width:14px;
  height:14px;
}

/* ------------------------------
   Área do formulário
   ------------------------------ */

.rep-login .auth-body{
  position:relative;
  min-width:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:54px clamp(32px,5vw,88px);
  background:
    radial-gradient(circle at 100% 0%,rgba(30,111,217,.08),transparent 27%),
    linear-gradient(180deg,#F9FBFD 0%,#F2F5F8 100%);
}

.rep-login .auth-body::before{
  content:"";
  position:absolute;
  top:30px;
  right:34px;
  width:100px;
  height:100px;
  opacity:.25;
  background-image:radial-gradient(circle,var(--login-blue) 1.2px,transparent 1.2px);
  background-size:11px 11px;
}

.rep-login .auth-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:430px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.rep-login .auth-title{
  margin:0;
  color:var(--login-text);
  font-size:32px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.035em;
}

.rep-login .auth-sub{
  max-width:360px;
  margin:10px 0 31px;
  color:var(--login-sub);
  font-size:13px;
  line-height:1.6;
}

/* Palavra rotativa do subtítulo ("Entre pra acompanhar ___") — padrão
   que veio da proposta do Kimi, o Felipe gostou e pediu pra trazer
   pra cá. */
.rot{
  color:var(--login-blue-light);
  font-weight:700;
  display:inline-block;
  transition:opacity .25s ease,transform .25s ease;
}

.rot.swap{
  opacity:0;
  transform:translateY(5px);
}

.rep-form{
  display:flex;
  flex-direction:column;
  gap:17px;
}

.rep-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.rep-field-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rep-label{
  color:#344256;
  font-size:11px;
  font-weight:750;
}

.rep-opc{
  color:#6B7787;
  font-weight:600;
}

.rep-dica{
  margin-top:6px;
  color:#5E6878;
  font-size:11px;
  line-height:1.35;
}

.rep-forgot{
  color:var(--login-blue);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

.rep-forgot:hover{
  text-decoration:underline;
}

.rep-input-shell{
  position:relative;
  display:flex;
  align-items:center;
  height:50px;
  border:1.5px solid var(--login-border);
  border-radius:11px;
  background:#fff;
  box-shadow:0 3px 10px rgba(13,43,82,.025);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.rep-input-shell:focus-within{
  border-color:var(--login-blue);
  box-shadow:
    0 0 0 4px rgba(30,111,217,.1),
    0 8px 24px rgba(30,111,217,.08);
  transform:translateY(-1px);
}

.rep-input-icon{
  display:grid;
  width:43px;
  height:100%;
  flex:0 0 auto;
  place-items:center;
  color:#8795A7;
}

.rep-input-icon svg{
  width:17px;
  height:17px;
}

.rep-input{
  width:100%;
  height:100%;
  min-width:0;
  padding:0 13px 0 0;
  border:none;
  outline:none;
  background:transparent;
  color:var(--login-text);
  font:inherit;
  font-size:13px;
}

.rep-input::placeholder{
  color:#A8B2BF;
}

.rep-password-toggle{
  display:grid;
  width:45px;
  height:100%;
  flex:0 0 auto;
  place-items:center;
  border:none;
  outline:none;
  background:transparent;
  color:#8795A7;
  cursor:pointer;
}

.rep-password-toggle:hover{
  color:var(--login-blue);
}

.rep-password-toggle:focus-visible{
  border-radius:8px;
  outline:2px solid var(--login-blue);
  outline-offset:-5px;
}

.rep-password-toggle svg{
  width:17px;
  height:17px;
}

/* Linha "Lembrar de mim" + "Esqueci minha senha", junto, logo abaixo
   do campo de senha — antes o link ficava colado no rótulo "Senha"
   (acima do campo); mudou de posição por pedido do Felipe, igual ao
   padrão do Kimi. */
.rep-form-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:-3px;
}

.rep-checkbox{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--login-sub);
  font-size:11px;
  cursor:pointer;
}

.rep-checkbox input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--login-blue);
}

/* Botão "Entrar" — trocado de amarelo (CTA padrão do resto do app)
   pra azul em gradiente, no estilo do botão que o Felipe gostou na
   proposta do Kimi. Mantém o efeito de brilho (::before) e a seta que
   desliza no hover, que já existiam na proposta do GPT. Ganhou também
   o estado "sucesso" (is-done, verde) que o Kimi tinha e o GPT não. */
.rep-submit{
  position:relative;
  display:flex;
  width:100%;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:3px;
  overflow:hidden;
  border:none;
  border-radius:11px;
  background:linear-gradient(135deg,var(--login-blue-2) 0%,var(--login-blue) 45%,var(--login-blue-deep) 100%);
  color:#fff;
  font-family:inherit;
  font-size:14.5px;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    0 12px 26px -10px rgba(30,111,217,.6),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.rep-submit::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-70%;
  width:50%;
  height:200%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .55s ease;
}

.rep-submit:hover{
  transform:translateY(-2px);
  filter:saturate(1.06);
  box-shadow:
    0 16px 32px -10px rgba(30,111,217,.7),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.rep-submit:hover::before{
  left:125%;
}

.rep-submit:active{
  transform:translateY(0) scale(.99);
}

.rep-submit:focus-visible{
  outline:3px solid rgba(30,111,217,.28);
  outline-offset:3px;
}

.rep-submit svg{
  width:17px;
  height:17px;
  transition:transform .18s ease;
}

.rep-submit:hover svg{
  transform:translateX(3px);
}

.rep-submit.is-loading{
  pointer-events:none;
  opacity:.85;
}

.rep-submit.is-loading svg{
  animation:rep-spin .7s linear infinite;
}

.rep-submit.is-done{
  background:linear-gradient(135deg,#16A34A,#15803D);
  box-shadow:0 12px 26px -10px rgba(22,163,74,.55);
  pointer-events:none;
}

.rep-signup{
  margin-top:27px;
  padding-top:23px;
  border-top:1px solid var(--login-border);
  color:var(--login-sub);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}

.rep-signup a{
  color:var(--login-blue);
  font-weight:750;
  text-decoration:none;
}

.rep-signup a:hover{
  text-decoration:underline;
}

/* Rodapé de crédito/legal — "Termos"/"Privacidade" são placeholder
   (href="#") porque essas páginas ainda não existem; trocar quando a
   landing page for construída. */
.rep-footnote{
  margin-top:14px;
  color:#8B99AF;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

.rep-footnote a{
  color:#8B99AF;
  text-decoration:underline;
  text-underline-offset:2px;
}

.rep-footnote a:hover{
  color:var(--login-blue);
}

.rep-mobile-security{
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:22px;
  color:#8491A1;
  font-size:10px;
}

.rep-mobile-security svg{
  width:13px;
  height:13px;
}

/* ------------------------------
   Animações
   ------------------------------ */

@keyframes rep-spin{
  to{transform:rotate(360deg);}
}

/* ------------------------------
   Responsividade
   ------------------------------ */

@media(max-width:1050px){
  .auth-wrap.rep-login{
    grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  }

  .rep-login .auth-visual{
    padding-inline:38px;
  }

  .rep-hero-title{
    font-size:45px;
  }

  .rep-product-scene{
    height:220px;
  }
}

/* Abaixo de 859px o app vira split-screen empilhado. Antes, o hero
   grande (título+parágrafo+demo do produto) vinha ANTES do formulário
   e empurrava o login pra fora da tela inicial — precisava rolar pra
   ver os campos. Agora .rep-hero fica oculto no mobile (só some o
   texto de marketing, o formulário continua igual) e sobra só uma
   barra fina com a logo antes do card — o login inteiro cabe na tela
   sem rolar. */
@media(max-width:859px){
  /* Sem "topbar" com cor própria — a cena de fundo (.rep-mobile-scene,
     fixed, definida acima) já cobre a tela inteira; .auth-wrap e
     .auth-visual ficam transparentes e só entram no fluxo normal por
     cima dela (position:relative + z-index garantem isso). */
  .auth-wrap.rep-login{
    display:flex;
    min-height:100vh;
    flex-direction:column;
    overflow:auto;
    background:transparent;
  }

  .rep-login .auth-visual{
    position:relative;
    z-index:1;
    min-height:auto;
    padding:26px 24px 18px;
    background:none;
  }

  .rep-hero,
  .rep-visual-footer{
    display:none;
  }

  .rep-visual-top{
    justify-content:center;
  }

  /* Empilhado (ícone em cima, nome embaixo, centralizado) — igual ao
     exemplo que o Felipe mandou — em vez de lado a lado. */
  .rep-brand{
    flex-direction:column;
    gap:12px;
  }

  /* 148px de glifo REAL (ver comentário longo em .rep-brand-icon). O valor
     antigo aqui também era 148, mas sobre o arquivo com padding — o que
     chegava na tela eram 74px. Mesmo número, dobro do tamanho visível. */
  .rep-brand-icon{
    height:148px;
  }

  .rep-brand-text{
    font-size:30px;
  }

  .rep-login .auth-body{
    position:relative;
    z-index:1;
    min-height:auto;
    flex:1;
    align-items:flex-start;
    padding:24px 17px 35px;
    background:transparent;
  }

  .rep-login .auth-body::before{
    display:none;
  }

  .rep-login .auth-card{
    max-width:480px;
    padding:26px 22px 22px;
    border:1px solid rgba(216,225,235,.8);
    border-radius:19px;
    background:#fff;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
  }

  .rep-login .auth-title{
    font-size:24px;
  }

  .rep-login .auth-sub{
    margin:7px 0 21px;
  }

  .rep-mobile-security{
    display:flex;
  }
}

@media(max-width:420px){
  .rep-login .auth-visual{
    padding:22px 17px 16px;
  }

  .rep-brand-text{
    font-size:28px;
  }

  .rep-login .auth-card{
    padding-inline:18px;
  }

  .rep-form-options{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* O que aperta a logo no mobile é ALTURA de tela, não largura — e por largura
   era como estava sendo decidido antes (um `max-width:420px` cortava o glifo
   pra 112px). Isso punia justamente os celulares modernos, que são estreitos
   E altos: num 390×844 sobravam 235px de folga abaixo do botão "Entrar" e
   mesmo assim a logo vinha reduzida, enquanto o caso realmente apertado
   (375×667, iPhone SE) é curto mas não mais estreito que eles.

   Então o corte é por altura. Acima de 720px de viewport o glifo fica nos
   148px cheios; só telas curtas caem pra 112px, que é onde a conta fecha:
   medido no 375×667, o botão "Entrar" termina com ~66px de sobra — mais
   folga do que a versão antiga tinha (58px) com metade do tamanho de logo.
   Foi o padding transparente removido do PNG que devolveu esse espaço. */
@media(max-width:859px) and (max-height:720px){
  .rep-login .auth-visual{
    padding:20px 17px 12px;
  }

  .rep-brand{
    gap:9px;
  }

  .rep-brand-icon{
    height:112px;
  }

  .rep-brand-text{
    font-size:26px;
  }
}

@media(prefers-reduced-motion:reduce){
  .rot,
  .rep-submit.is-loading svg{
    animation:none;
    transition:none;
  }

  .rep-submit,
  .rep-submit::before,
  .rep-submit svg,
  .rep-input-shell{
    transition:none;
  }
}


/* ============================================================
   MODOS QUE O ARTIFACT NÃO TINHA — cadastro, "esqueci minha senha" e
   redefinição de senha.

   Os HTMLs de exploração só desenharam a tela de LOGIN (formulário
   estático, links href="#"). O login.html real tem três modos no mesmo
   Alpine (login / esqueci / signup) e o redefinir-senha.html tem outros
   três estados (verificando / link inválido / nova senha). O bloco abaixo
   estende o desenho aprovado pra cobrir todos eles.
   ============================================================ */

/* Cadastro tem 5 campos + captcha e fica mais alto que a viewport em
   notebook. Com `align-items:center` puro, um filho mais alto que o
   container transborda pros DOIS lados e o topo do card fica inalcançável
   na rolagem — bug clássico de centralização em flex. `safe center` degrada
   pra flex-start exatamente nesse caso; navegador sem suporte ignora a
   linha e mantém o comportamento anterior. */
.rep-login .auth-body{
  align-items:safe center;
}

/* .alert vem do estilo.css (mesmo componente do resto do app). Aqui só
   ganha respiro maior, porque o subtítulo do card tem margem de 31px e o
   alerta entra entre ele e o primeiro campo. */
.rep-login .alert{
  margin-bottom:18px;
  font-size:12.5px;
  line-height:1.45;
}

/* Campo do Turnstile: o widget tem altura própria (65px) e não usa
   .rep-input-shell — só precisa não colar no botão. */
.rep-turnstile{
  margin-top:2px;
  min-height:65px;
}

/* Link de volta ("Voltar pro login" / "Já tem conta? Entrar"). Mesma
   caixa do .rep-signup, mas sem a borda superior quando já existe um
   .rep-signup logo acima. */
.rep-back{
  margin-top:20px;
  color:var(--login-sub);
  font-size:12px;
  text-align:center;
}

.rep-back a{
  color:var(--login-blue);
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
}

.rep-back a:hover{
  text-decoration:underline;
}

/* Estados de "confirmando link" / "link inválido" do redefinir-senha.html:
   não têm formulário, só título + texto + link. Sem isso o card fica
   grudado no topo do próprio conteúdo. */
.rep-status{
  margin-bottom:4px;
  color:var(--login-sub);
  font-size:13px;
  line-height:1.6;
}

/* No mobile o card é branco e mais estreito; o cadastro com 5 campos fica
   longo, então o espaçamento entre campos aperta um pouco pra reduzir
   rolagem sem espremer os controles (altura do .rep-input-shell não muda). */
@media(max-width:859px){
  .rep-login .auth-card .rep-form{
    gap:14px;
  }

  .rep-back{
    margin-top:16px;
  }
}