/* ===========================================================================
   jornada.css, a CAMADA FINA por cima de /hub.css
   ---------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE, E POR QUE ELE É PEQUENO
   As telas de conta (entrar, obrigado) passaram a carregar /hub.css, que é o
   sistema medido no 360dialog: os três degraus de tipografia (12/16, 14/20,
   16/24), os quatro pesos, a grade de 8, o controle de 38px, o raio 6 no
   controle e 12 no cartão, e uma sombra só, a 5%.

   O que o hub.css NÃO tem, e o que este arquivo acrescenta, é UM componente:
   o CARTÃO-PORTÃO. No produto deles ele é a tela inteira de login
   (01-login.png): um cartão de 400px flutuando no meio de uma página vazia,
   sem cabeçalho, sem rodapé e sem pastilha. O hub.css nasceu para o painel,
   que é o depois do login, e por isso não descreve o antes.

   AS MEDIDAS DAQUI SAÍRAM DE 01-login.png e 05-enviado.png:
     cartão de 400px de largura, FIXOS
     padding de 40px nos quatro lados (o botão mede 320 = 400 - 80, no pixel)
     logotipo no topo, centrado
     botão sólido ocupando a largura interna cheia
     rodapé do cartão com o link do caminho oposto ("Don't have an account?")

   O QUE MUDA EM RELAÇÃO A ELES, e por quê:
   1. FUNDO DA PÁGINA. Eles usam #FFFFFF e o cartão se separa só pela sombra.
      Aqui o fundo é --secondary #F4F7FA, por ordem escrita, e é o mesmo cinza
      que /descobrir já usa. Sobre cinza a borda de 1px volta a fazer falta,
      então o cartão leva borda E sombra.
   2. COR DO BOTÃO. O primário da jornada é o AZUL-AÇO da marca, não o verde
      do WhatsApp. Na jornada de conta o primário é a cor da marca, como é
      neles; o verde continua sendo cor de AÇÃO no contexto de conversa. Duas
      línguas na mesma jornada é o que fazia o produto parecer costurado.
      O preenchimento é --primary-strong #47617B e NÃO --primary #5B7A99:
      branco sobre #5B7A99 dá 4,48:1 e reprova o 4,5:1 por dois centésimos.
      Sobre #47617B são 6,43:1. No escuro os papéis se invertem sozinhos
      (--primary-strong vira #8AA2B8 e a letra vira #0B1119, 7,16:1).
   3. RÓTULO ACIMA DO CAMPO, e não o rótulo flutuante que recorta a borda de
      cima no campo deles. Rótulo flutuante não existe no hub.css, e criar um
      componente para uma tela só é o oposto de copiar o sistema.

   CSP: entra por <link rel="stylesheet">. Todo o JavaScript vive em /js/ e
   entra por <script src>: script-src é 'self' sem 'unsafe-inline'.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. A PÁGINA
   O cartão fica centrado nos dois eixos, com no mínimo 48px de folga acima e
   abaixo. Os 48 são [DERIVADO] da grade de 8, e existem para o cartão não
   colar na borda da janela quando a tela é curta: com `justify-content:center`
   sozinho, um cartão mais alto que a janela seria CORTADO em cima, e a pessoa
   perderia o título. Com o padding, ele passa a rolar.
   --------------------------------------------------------------------------- */
body.jor{background:var(--secondary); color:var(--foreground)}

.jor-pagina{
  min-height:100vh;
  min-height:100dvh;      /* o dvh desconta a barra do navegador no celular */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;               /* a folga entre a marca e o cartão, quando ela fica de fora */
  padding:48px 16px;
}

/* ---------------------------------------------------------------------------
   2. O CARTÃO-PORTÃO
   400px FIXOS [MEDIDO neles]. Abaixo de 480px de viewport ele passa a ocupar a
   largura disponível, mantendo 16px de folga lateral (o padding da página).
   --------------------------------------------------------------------------- */
.jor-cartao{
  width:400px; max-width:100%;
  background:var(--card); color:var(--card-foreground);
  border:1px solid var(--card-edge);
  border-radius:var(--radius-card);   /* 12px, do nosso sistema, no lugar dos 16 de antes */
  box-shadow:var(--shadow);           /* a única sombra da folha, 5% */
  padding:40px;                       /* [MEDIDO neles] nos quatro lados */
}
/* [HARD] NO ESCURO O CARTÃO NÃO TEM SOMBRA, E POR ISSO A ARESTA TEM DE SUBIR.
   O --shadow do hub.css vira `rgba(0,0,0,.4)` no tema escuro, e a bancada
   reprova sombra acima de 5% em cartão ("num painel a hierarquia vem da borda e
   do espaço; sombra forte em cartão de dado é o sinal mais rápido de painel
   amador"). Ela está certa: preto sobre quase-preto engorda e não separa.

   [HARD] O QUE ESTAVA ESCRITO AQUI ATÉ 23/08/2026 ESTAVA ERRADO, e o erro era
   de MÉTODO, não de gosto. A frase era "o cartão #16202D sobre a página #0B1119
   já se separa pela própria luminância". #0B1119 é --background, o fundo do
   HUB. Esta página nunca desenha essa cor: ela é `body.jor{background:
   var(--secondary)}`, que no escuro é #1B2735. A conta estava certa para uma
   tela que não existe.
   O que a página realmente desenha, medido no navegador com
   prefers-color-scheme: dark, lendo o estilo COMPUTADO do body:
     cartão #16202D sobre página #1B2735  =  1,09:1   (não 1,15:1)
     borda  #2B3A4C sobre página #1B2735  =  1,31:1
   1,09:1 não é separação nenhuma: é o cartão sumindo. Quem separa no escuro é a
   ARESTA, e por isso a borda deste cartão passou a ser --card-edge, que no
   escuro vale #415673 e mede 2,02:1 contra a página. A regra e o número moram
   no hub.css, junto de --d-card-edge.
   As duas guardas são as mesmas do hub.css, e existem pelo mesmo motivo:
   preferência do sistema e classe .escuro no <html>. */
@media (prefers-color-scheme: dark){
  :root:not(.claro) .jor-cartao{box-shadow:none}
}
.escuro .jor-cartao{box-shadow:none}
/* Em tela estreita 40px de cada lado comeriam metade da largura útil. O respiro
   vertical continua generoso porque é ele que dá o ar do cartão. */
@media (max-width:480px){
  .jor-cartao{padding:32px 16px}
}

/* ---------------------------------------------------------------------------
   3. A MARCA
   Altura 32px, a mesma do .hub-marca do painel, para a marca não mudar de
   tamanho entre a jornada e o hub. Ela aparece em dois lugares diferentes, e a
   distinção é copiada deles: no 01-login a marca fica DENTRO do cartão, porque
   a tela pede uma ação; no 05-enviado ela sai para cima do cartão e vira
   assinatura da página, porque a tela apenas conta que algo aconteceu.
   --------------------------------------------------------------------------- */
.jor-marca{
  display:flex; justify-content:center;
  color:var(--foreground); text-decoration:none;
}
.jor-marca svg{display:block; height:32px; width:auto}
/* 32px entre o fim do logotipo e o topo do texto [MEDIDO neles]. */
.jor-cartao > .jor-marca{margin-bottom:32px}

/* ---------------------------------------------------------------------------
   4. TEXTO
   O título é o ÚNICO tamanho fora dos três degraus do hub, e existe porque no
   cartão-portão ele é o objeto mais importante da tela: 24px/32px, peso 400,
   igual ao "Welcome" e ao "Create a new account" deles. Peso 400 é medida, não
   descuido: título grande em peso forte é vocabulário de página de vendas.
   --------------------------------------------------------------------------- */
.jor-titulo{
  margin:0;
  font-size:24px; line-height:32px; font-weight:400;
  color:var(--foreground); text-align:center;
}
/* UMA linha de apoio. Não duas, não três. */
.jor-apoio{
  margin:8px 0 0;
  font-size:14px; line-height:20px; color:var(--muted-foreground); text-align:center;
}
.jor-sub{margin:0; font-size:16px; line-height:24px; font-weight:600; color:var(--foreground)}
/* Centrado, como todo o resto do cartão-portão. Uma frase solta alinhada à
   esquerda dentro de um cartão em que título, apoio e rodapé são centrados
   cria um eixo a mais, e o cartão perde o prumo. */
.jor-corpo{margin:24px 0 0; font-size:14px; line-height:20px; color:var(--foreground); text-align:center}
/* Título de um bloco DENTRO do cartão. É o terceiro degrau (16/24 peso 600), o
   mesmo do título de cartão do hub, e não um quarto tamanho. */
.jor-titulo-bloco{margin:24px 0 0; font-size:16px; line-height:24px; font-weight:600; color:var(--foreground)}
/* A pastilha de estado, centrada, 16px acima do título. Ela é o par do "Ready"
   verde medido no channel.png, e substitui a pastilha de 244x34 que era
   vocabulário de landing. */
.jor-linha-selo{margin:0 0 16px; text-align:center}
/* Nota de rodapé de bloco: o degrau menor, e cinza secundário. */
.jor-nota{
  margin:12px 0 0;
  font-size:12px; line-height:16px; color:var(--muted-foreground); text-align:center;
}
.jor-dica{margin:8px 0 0; font-size:12px; line-height:16px; color:var(--muted-foreground)}
.jor-forte{font-weight:500}   /* o trecho que hoje é negrito. Peso, nunca um degrau acima */

/* LINK DENTRO DE TEXTO CORRIDO.
   O hub.css traz `a{color:inherit}`, e isso é certo no painel, onde todo link
   é um bloco inteiro clicável. Aqui não: um endereço de e-mail no meio de uma
   frase cinza herdaria o cinza e ficaria indistinguível do resto, sem sublinhado
   e sem cor. Azul-aço só passa em contraste como LETRA na versão escurecida,
   e o sublinhado existe porque cor sozinha não marca link.
   Medido: #47617B dá 6,43:1 sobre o cartão branco, 6,15:1 sobre o verde-50 da
   faixa de sucesso e 5,88:1 sobre o vermelho-50 da faixa de erro. */
.jor-nota a, .jor-corpo a, .jor-apoio a,
.hub-faixa-erro a, .hub-faixa-ok a{
  color:var(--primary-strong);
  text-decoration:underline; text-underline-offset:2px;
}
.jor-nota a:hover, .jor-corpo a:hover, .jor-apoio a:hover,
.hub-faixa-erro a:hover, .hub-faixa-ok a:hover{color:var(--primary-stronger)}

/* ---------------------------------------------------------------------------
   5. FORMULÁRIO E BOTÃO
   O campo é o .hub-campo de 38px, aqui só esticado para a largura do cartão.
   --------------------------------------------------------------------------- */
.jor-forma{margin-top:24px}
.jor-forma .hub-campo{width:100%}
.jor-faixa{margin-top:24px}
.jor-acao{margin-top:24px}

/* Botão de largura interna cheia: 320px dentro de um cartão de 400 com 40 de
   padding. [MEDIDO neles] no 01-login (320 de 320) e no add-channel (largura
   inteira do diálogo). Botão estreito no fim de um cartão largo é da landing,
   não do produto. */
.jor-cheio{width:100%}

/* O PRIMÁRIO DA JORNADA. Ver a nota 2 do cabeçalho deste arquivo. */
.jor-btn-marca{
  background:var(--primary-strong);
  border-color:var(--primary-strong);
  color:var(--primary-foreground);
  font-weight:600;
}
.jor-btn-marca:hover:not(:disabled){
  background:var(--primary-stronger);
  border-color:var(--primary-stronger);
}

/* ---------------------------------------------------------------------------
   5.1 GRUPO DE CAMPO
   Enquanto a tela de entrar tinha UM campo, a folga entre campos não existia e
   ninguém sentiu falta. Com o campo de senha embaixo do de e-mail ela passou a
   ser o que separa duas perguntas diferentes. 16px [DERIVADO da grade de 8], e
   não 24: 24 é a folga entre BLOCOS (formulário e botão), e usar o mesmo valor
   nos dois lugares faria os dois campos parecerem dois blocos soltos.
   --------------------------------------------------------------------------- */
.jor-grupo + .jor-grupo{margin-top:16px}

/* ---------------------------------------------------------------------------
   5.2 O OLHO DE REVELAR A SENHA
   [MEDIDO em 01-login.png deles] o glifo fica DENTRO do campo, encostado na
   direita, e não fora dele.

   [HARD] AQUI ELE É UM <button type="button"> DE VERDADE, e isso é decisão.
   O .hub-campo__icone do hub.css tem `pointer-events:none` porque lá o ícone é
   enfeite (a lupa da busca). Um olho não é enfeite: ele faz uma coisa quando
   apertado. Ícone clicável feito com <span> não recebe foco pelo teclado, não
   responde ao Enter e não tem nome para o leitor de tela dizer. O nome muda com
   o estado (mostrar/ocultar) e o estado vai em aria-pressed, escrito pelo
   /js/entrar.js e pelo /js/definir-senha.js.

   Ele ocupa a altura inteira do campo (38px menos as duas bordas) para o alvo
   do dedo ser o maior que cabe dentro do controle.
   --------------------------------------------------------------------------- */
.jor-campo-senha input{padding-right:44px}
.jor-olho{
  position:absolute; top:0; right:0;
  width:38px; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent;
  color:var(--muted-foreground);   /* 5,33:1 sobre o cartão: passa como texto, e ícone pede 3:1 */
  border-radius:0 var(--radius) var(--radius) 0;
  cursor:pointer;
}
.jor-olho:hover{color:var(--foreground)}
/* O anel do .hub-campo marca o CAMPO. Quem está com o foco no olho precisa de
   um segundo sinal, dentro dele, senão o teclado atravessa o botão sem que a
   tela mude nada. */
.jor-olho:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--ring)}
.jor-olho svg{width:16px; height:16px; display:block}

/* ---------------------------------------------------------------------------
   5.3 BOTÃO QUE PARECE LINK
   É o lugar exato do "Reset password" deles: colado embaixo do campo de senha,
   alinhado à esquerda, no azul da marca.

   [HARD] ELE NÃO É UM <a>, PORQUE NÃO LEVA A LUGAR NENHUM: ele executa o
   caminho antigo, o pedido do link de acesso, na mesma tela. Link que não
   navega quebra o clique do meio, o "abrir em nova aba" e a expectativa de
   quem lê a barra de estado. Botão que faz coisa é <button>.
   --------------------------------------------------------------------------- */
.jor-link-acao{
  display:inline; margin:8px 0 0; padding:0;
  border:0; background:transparent;
  font:inherit; font-size:12px; line-height:16px; font-weight:600;
  color:var(--primary-strong);     /* 6,43:1 sobre o cartão branco */
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer; text-align:left;
}
.jor-link-acao:hover{color:var(--primary-stronger)}
.jor-link-acao:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:2px}
.jor-linha-link{margin:8px 0 0}

/* ---------------------------------------------------------------------------
   5.4 A REGRA DA SENHA, ESCRITA ANTES DE A PESSOA DIGITAR
   Ela é um bloco de leitura, não um aviso: fundo neutro, sem cor de estado.
   Aparece cedo de propósito. Regra que só aparece na recusa obriga a pessoa a
   descobrir o critério errando, e quem erra duas vezes fecha a aba.
   --------------------------------------------------------------------------- */
.jor-regras{
  margin:24px 0 0; padding:16px;
  background:var(--secondary);
  /* [MEDIDO 24/08/2026] o fundo do bloco contra o do cartão dá 1,08:1 no claro
     e 1,09:1 no escuro. É o mesmo 1,09:1 que fez o próprio .jor-cartao ganhar
     uma aresta neste arquivo, e a conta é a mesma: preenchimento quase igual
     não separa, quem separa é a borda. Sem ela o bloco some no escuro.
     A borda é --card-edge, e não --border, pelo mesmo motivo do cartão: no
     claro os dois valem a mesma coisa, e no escuro só o --card-edge (#415673)
     tem luminância para desenhar aresta. Trocar por --border aqui só teria
     efeito no escuro, e o efeito seria apagar a aresta de novo. */
  border:1px solid var(--card-edge);
  border-radius:var(--radius);
  font-size:12px; line-height:16px; color:var(--foreground);
}
.jor-regras p{margin:0 0 8px; font-weight:600}
.jor-regras ul{margin:0; padding-left:18px}
.jor-regras li + li{margin-top:4px}

/* O contador ao vivo do comprimento. Cinza enquanto falta, e o verde de
   sucesso do hub quando chega: cor NUNCA sozinha, a frase muda junto. */
.jor-medidor{margin:8px 0 0; font-size:12px; line-height:16px; color:var(--muted-foreground)}
.jor-medidor[data-ok="true"]{color:var(--ok-foreground)}

/* Armadilha de robô. O tamanho de 1px vai no INPUT, e não só no invólucro:
   `overflow:hidden` no pai esconde o campo do olho e não muda a medida do
   campo, então um medidor que varre `input` continua encontrando um controle
   de 21px e acusando altura errada. Aqui ele mede 1px e some da conta. */
.jor-armadilha{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden}
.jor-armadilha input{width:1px; height:1px}

/* ---------------------------------------------------------------------------
   6. RODAPÉ DO CARTÃO
   O lugar exato do "Don't have an account? Sign up" e do "Cannot see the
   Email? Request a new link" deles: uma linha só, centrada, com o caminho
   oposto ao da tela. O link usa --primary-strong porque azul como LETRA sobre
   branco só passa em contraste na versão escurecida.
   --------------------------------------------------------------------------- */
.jor-rodape{
  margin-top:24px; padding-top:24px;
  border-top:1px solid var(--border);
  font-size:14px; line-height:20px; color:var(--foreground); text-align:center;
}
.jor-rodape a{
  color:var(--primary-strong); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.jor-rodape a:hover{color:var(--primary-stronger)}
.jor-rodape p{margin:0}
.jor-rodape p + p{margin-top:8px}

/* SELETOR DE IDIOMA, só nas versões /en e /es.
   Ele morava no cabeçalho de marketing, e o cabeçalho saiu. Não virou aba nem
   botão: é uma saída lateral, e o lugar das saídas laterais neste molde é o
   rodapé do cartão. Fica no degrau menor (12/16) porque quem chegou já está no
   idioma certo em 99 dos 100 casos, e o objeto importante da tela é o campo.
   Contraste: #6B6B6B sobre o cartão branco dá 5,33:1. */
.jor-idiomas{
  display:flex; justify-content:center; gap:16px;
  margin-top:16px;
  font-size:12px; line-height:16px;
}
.jor-idiomas a{
  color:var(--muted-foreground); text-decoration:none;
  /* [HARD] O 400 é explícito porque `.jor-rodape a` põe 600 em TODO link do
     rodapé, e a fileira de idioma mora dentro dele. Sem esta linha os três
     idiomas saíam em negrito e o corrente ficava indistinguível dos outros
     dois: a marcação existia no CSS e não existia na tela. Quem achou foi a
     medição, que leu a fileira como abas e encontrou TRÊS abas ativas. */
  font-weight:400;
  padding-bottom:2px;
  border-bottom:2px solid transparent;   /* nasce transparente para o corrente não empurrar nada */
}
.jor-idiomas a:hover{color:var(--primary-strong)}
/* [HARD] O IDIOMA CORRENTE MUDA TRÊS COISAS: cor, peso E a linha de 2px na cor
   primária. É a regra da .hub-aba do hub.css, aplicada aqui pelo mesmo motivo,
   e foi a medição que cobrou: esta fileira é semanticamente um <nav> de links,
   e o medidor a lê como fileira de abas. Ele estava certo em cobrar. Marcar o
   corrente só pela cor exclui quem não distingue matiz; só pela linha é fraco
   de relance. As três juntas resolvem os dois casos. */
.jor-idiomas a[aria-current]{
  color:var(--foreground); font-weight:600;
  border-bottom-color:var(--primary);
}

/* ---------------------------------------------------------------------------
   7. PARES RÓTULO/VALOR E PASSOS
   O par segue a regra do .hub-par: o RÓTULO é que tem peso 600 e o valor fica
   em 400, empilhado abaixo dele e alinhado à esquerda.

   [HARD] JÁ FOI ROTULO-À-ESQUERDA E VALOR-À-DIREITA, como linha de recibo, e a
   bancada visual reprovou: o valor da cobrança é uma FRASE ("na contratação,
   com 7 dias para desistir"), não um número. Dentro de 320px ela quebrava em
   duas linhas alinhadas à direita e sobrava a palavra "desistir" sozinha na
   segunda. Linha de recibo só funciona com valor curto, e este valor vem do
   /js/textos.js e muda por plano e por idioma: não dá para contar com curto.
   Empilhado ele cabe em uma linha nos três idiomas e nunca fica órfão.
   --------------------------------------------------------------------------- */
.jor-pares{margin:24px 0 0; display:grid; gap:16px}
.jor-pares dt{font-size:14px; line-height:20px; font-weight:600; color:var(--foreground)}
.jor-pares dd{margin:4px 0 0; font-size:14px; line-height:20px; color:var(--muted-foreground)}

.jor-passos{
  margin:16px 0 0; padding-left:20px;
  font-size:14px; line-height:20px; color:var(--foreground);
}
.jor-passos li + li{margin-top:8px}
.jor-passos b{font-weight:600}

/* Fila de carregamento: enquanto o servidor não respondeu, a tela não afirma
   nada. Cinza secundário e sem giro, porque a espera não foi pedida por
   ninguém: ela é a própria abertura da página. */
.jor-carregando{font-size:14px; line-height:20px; color:var(--muted-foreground); text-align:center}

/* A LINHA LEGAL mora no hub.css, e nao aqui: das 15 telas da jornada, so 6
   carregam esta folha. As outras 9 (o molde de FLUXO) carregam so o hub.css, e
   nelas a regra escrita aqui nao valia -- a linha saia sem estilo nenhum, em
   16px preto na largura inteira da janela, medido em 1280px contra os 400 das
   outras. Regra de componente compartilhado vai na folha que TODOS carregam. */


/* ---------------------------------------------------------------------------
   /auth/login  -  o molde ATUAL do 360dialog (medido no print de 24/08/2026).

   Ele e diferente do molde "portao" que /entrar usa, e a diferenca e proposital:
   la o logotipo fica DENTRO do cartao; aqui ele fica ACIMA, e o cartao ganha um
   cabecalho com faixa. Sao dois moldes de acesso, e eles convivem porque o
   360dialog tambem tem os dois (o /auth/login e o cadastro).
   --------------------------------------------------------------------------- */

/* O logotipo solto, acima do cartao. */
.jor-marca-solta{
  margin:0 auto 24px;
  text-align:center;
}
.jor-marca-solta svg{display:block; height:28px; width:auto; margin:0 auto; color:var(--foreground)}

/* O cartao do /auth e mais largo que o do portao: [MEDIDO] 560px contra 400. */
.jor-cartao--auth{
  width:560px; max-width:100%;
  padding:0;                       /* o padding vive nas duas metades */
  overflow:hidden;                 /* a faixa do cabecalho respeita o raio */
}

/* O CABECALHO COM A FAIXA.
   [HARD] O padrao grafico e desenhado em CSS, e nao copiado.
   O deles e um conjunto de linhas curvas claras no canto direito. Copiar o SVG
   seria usar a arte DELES, que nao e nossa; e imagem de fora cairia na CSP
   (`default-src 'self'`). O gradiente conico abaixo faz o mesmo papel visual:
   dar textura ao canto sem competir com o texto. */
.jor-auth__cabeca{
  position:relative;
  padding:28px 32px 24px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent) 0%, transparent 60%),
    var(--card);
}
.jor-titulo--auth{
  margin:0; text-align:left;
  font-size:24px; line-height:32px; font-weight:600;
  color:var(--foreground);
}
.jor-auth__convite{
  margin:8px 0 0;
  font-size:14px; line-height:20px;
  color:var(--muted-foreground);
}
.jor-auth__convite a{color:var(--primary-strong); text-decoration:none; font-weight:500}
.jor-auth__convite a:hover{text-decoration:underline}
.jor-auth__convite a:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:2px}

.jor-auth__corpo{padding:32px}

@media (max-width:600px){
  .jor-auth__cabeca{padding:24px 20px 20px}
  .jor-auth__corpo{padding:24px 20px}
}

/* A dica do campo de senha colava no botao: as duas linhas dela terminavam
   encostadas na borda de cima do "Fazer login", e o olho lia como se a frase
   fosse rotulo do botao. [MEDIDO] 8px nao bastam quando a dica tem duas linhas. */
.jor-auth__corpo .jor-dica{margin-bottom:20px}
.jor-auth__corpo .jor-cheio{margin-top:0}

/* ---------------------------------------------------------------------------
   9. O LOGIN SOCIAL (03/09/2026)
   Os botões "Continuar com o Google" e "Continuar com o Facebook", abaixo do
   formulário de entrar e acima do de cadastro, separados por uma linha com
   "ou" no meio: é o arranjo do 360dialog (login e signup), medido no print.
   O botão é o de contorno do hub.css, na largura interna cheia, com o glifo do
   provedor à esquerda do texto. As cores dos glifos são as de marca de cada
   provedor (Google exige o "G" oficial nas cores dele), e por isso ficam no
   próprio SVG, não em tokens do sistema.
   --------------------------------------------------------------------------- */
.jor-social{margin-top:24px}
.jor-social--cadastro{margin:0 0 24px}
.jor-social__ou{
  display:flex; align-items:center; gap:12px;
  margin:16px 0;
  font-size:12px; line-height:16px; font-weight:500;
  color:var(--muted-foreground);
  text-transform:uppercase; letter-spacing:.04em;
}
.jor-social__ou::before,.jor-social__ou::after{content:""; flex:1; height:1px; background:var(--border, #D9DEE5)}
.jor-social--cadastro .jor-social__ou{margin:16px 0 0}
.jor-social__botoes{display:grid; gap:12px}
.jor-social__btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%}
.jor-social__glifo{display:inline-flex; width:18px; height:18px; flex:none}
.jor-social__glifo svg{width:18px; height:18px; display:block}