/* ============================================================
   Telas de entrada — linguagem visual do Link by Stripe
   (relatorio-interface-link, 27/07/2026): Inter com tracking
   -0.015em, campo de 56px com rótulo flutuante sobre #f4f7fa,
   raio 12px, CTA cápsula verde #00D66F com texto quase-preto,
   conteúdo de no máximo 400px, breakpoint único em 800px.
   Usada por: login do admin, entrar/definir senha de membros
   e os avisos (link expirado, sem acesso, ainda não liberado).
   ============================================================ */

.entrada {
  /* Fundo escuro em vez de branco. A porta de entrada e a unica tela que a
     pessoa ve antes de decidir se confia no sistema: escuro com um brilho da
     marca da a impressao de produto acabado, e o formulario claro no meio
     vira a unica coisa que puxa o olho. */
  --fundo: #08080a;
  --superficie: rgba(14, 14, 17, 0.96);
  --borda: rgba(255, 255, 255, 0.1);

  --tinta: #ffffff;
  --tinta-2: rgba(255, 255, 255, 0.62);
  --tinta-3: rgba(255, 255, 255, 0.38);
  --campo-fundo: rgba(255, 255, 255, 0.04);
  --campo-fundo-foco: rgba(255, 255, 255, 0.07);

  /* A cor do botao muda com QUEM esta entrando, seguindo a identidade:
     - painel do produtor -> blurple, a cor do sistema
     - area do comprador  -> azul, a cor do checkout
     Verde fica reservado para dinheiro (valor pago, venda aprovada) e nao
     aparece aqui: um botao "Entrar" verde promete conversao onde so existe
     login, e gasta o sinal que deveria valer na hora da venda. */
  --cta: #533afd;
  --cta-hover: #4429f0;
  --cta-tinta: #ffffff;

  /* As tres paradas da onda de luz (shimmer): base escura, meio da cor e o
     pico claro. O pico e mais claro que a cor da marca de proposito — a onda
     corre num texto pequeno, onde contraste sutil nao aparece. */
  --luz-base: #3a24c9;
  --luz-meio: #533afd;
  --luz-pico: #b9aeff;

  --verde-cta: var(--cta);
  --verde-tinta: var(--cta-tinta);
  --erro: #e61947;
  --erro-texto: #c0123c;
  --curva-principal: cubic-bezier(0.2, 1, 0.25, 1);
  --curva-rotulo: cubic-bezier(0.3, 0.3, 0.3, 1);

  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fundo);
  color: var(--tinta);
  isolation: isolate; /* o fundo pintado abaixo nao escapa para fora da tela */
  font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  /* Tracking NAO e herdado daqui: cada tamanho pede o seu (ver abaixo).
     Um valor unico para a tela inteira esta necessariamente errado em algum
     texto — letra grande precisa de tracking negativo (os espacos crescem
     junto com a letra e o texto se esparrama), e letra pequena precisa de
     tracking levemente positivo para nao empastar. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Entrada do COMPRADOR (area de membros): azul do checkout, nao o blurple do
   painel. Quem chega aqui e cliente do produtor, nao usuario da Mitz. */
.entrada--comprador {
  --cta: #0570de;
  --cta-hover: #0461c4;
  --luz-base: #044a9e;
  --luz-meio: #0570de;
  --luz-pico: #9ecbff;
}

/* ============================================================
   O fundo: luz de canto que atravessa em diagonal
   ============================================================
   Feito com gradientes em vez de imagem. Sao tres motivos praticos, nao
   preciosismo: imagem de fundo em tela cheia pesa no primeiro carregamento
   JUSTO na tela que a pessoa ve antes de qualquer outra; ela precisaria de
   uma versao para cada tamanho de tela; e a intensidade da luz nao poderia
   ser ajustada sem reexportar o arquivo.

   A composicao imita a referencia: luz clara entrando pela borda esquerda,
   virando violeta e depois azul no meio, e caindo para o preto na diagonal
   de cima-direita para baixo-direita.

   A opacidade e baixa DE PROPOSITO ("de forma leve", como foi pedido): o
   fundo tem que dar clima, nunca disputar com o formulario. Quem precisa ser
   lido aqui e o cartao.
   ============================================================ */
.entrada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* a luz mais clara, encostada na borda esquerda */
    radial-gradient(120% 90% at -8% 62%, rgba(233, 205, 255, 0.85) 0%, rgba(233, 205, 255, 0) 42%),
    /* o violeta que nasce dela */
    radial-gradient(110% 85% at 6% 48%, rgba(150, 70, 245, 0.9) 0%, rgba(150, 70, 245, 0) 55%),
    /* o azul do meio, mais alto */
    radial-gradient(120% 100% at 26% 12%, rgba(58, 42, 235, 0.85) 0%, rgba(58, 42, 235, 0) 62%),
    /* o toque lilas no topo, do lado direito */
    radial-gradient(70% 60% at 74% -6%, rgba(206, 150, 240, 0.55) 0%, rgba(206, 150, 240, 0) 60%),
    /* a diagonal escura que come o lado direito */
    linear-gradient(118deg, rgba(8, 8, 16, 0) 38%, rgba(8, 8, 16, 0.92) 68%),
    var(--fundo);
  opacity: 0.55;
}

/* O granulado. E ele que tira o ar de "gradiente de editor de slides" e da a
   textura da referencia — sem ele, faixas de cor grandes ainda mostram as
   listras de banding em tela boa. */
.entrada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* Em tela pequena a luz precisa subir: no celular o cartao ocupa o meio todo,
   e a luz na altura dele deixaria o texto competindo com o fundo. */
@media (max-width: 560px) {
  .entrada::before {
    opacity: 0.42;
    background-position: 0 -10%;
  }
}

/* Seleção de texto na tinta do Link (o azul do painel não entra aqui) */
/* Seleção de texto na cor de acento.
   Era "background: var(--tinta)" — que no tema claro era azul-escuro e
   funcionava. Com o tema escuro, --tinta virou BRANCO, e a regra passou a
   pintar branco sobre texto branco: selecionar o e-mail fazia aparecer uma
   barra sólida no lugar do texto. */
.entrada ::selection {
  background: var(--cta);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff; /* vence o texto transparente do gradiente */
}

/* ---------- topo: logotipo central, 60px (76px no celular) ---------- */
.entrada__topo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.entrada__logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.entrada__logo span { color: var(--tinta-3); }

/* ---------- coluna central: mínimo 320, máximo 400 ---------- */
.entrada__conteudo {
  flex: 1;
  width: 100%;
  min-width: 320px;
  max-width: 440px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: entrada-surgir 500ms var(--curva-principal);
}

/* O cartao: superficie escura translucida sobre o brilho. O desfoque de
   fundo e o que faz a luz atravessar sem borrar o texto. */
.entrada__conteudo {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 32px 24px 36px;
  background: var(--superficie);
  /* A borda e MAIS ESCURA que o cartao, nao mais clara.
     Borda clara faz a peca parecer iluminada por tras — ela flutua, mas nao
     tem volume. Escurecendo o contorno, o cartao passa a se destacar por
     PROFUNDIDADE: parece uma placa apoiada sobre o fundo, com o proprio
     sulco em volta. */
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 24px;
  box-shadow:
    /* a sombra projetada, que separa do fundo */
    0 24px 64px -16px rgba(0, 0, 0, 0.75),
    /* um fio de luz na aresta de cima: e ele que faz o olho ler "peca
       solida iluminada de cima" em vez de "retangulo mais escuro" */
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    /* e o contorno interno claríssimo, que devolve a definicao que a borda
       escura tirou — sem ele o cartao encosta no fundo e some nas partes
       escuras da tela */
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@media (min-width: 560px) {
  .entrada__conteudo {
    padding: 40px;
    margin: 0 auto 40px;
  }
}

/* Só posição, nunca opacidade: se a animação congelar (aba em segundo
   plano, painel sem compositor), o conteúdo continua legível. */
@keyframes entrada-surgir {
  from { transform: translateY(6px); }
  to { transform: translateY(0); }
}

.entrada__titulo {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}

.entrada__sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--tinta-2);
}
.entrada__sub strong { font-weight: 500; color: var(--tinta); }

/* ---------- alerta de erro ---------- */
.entrada .alerta {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
}
.entrada .alerta--erro {
  background: #fde9ee;
  color: var(--erro-texto);
}

/* ---------- campo com rótulo flutuante (56px, raio 12) ---------- */
.entrada__form { display: flex; flex-direction: column; gap: 12px; }

.campo-flutuante {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--campo-fundo);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.campo-flutuante:focus-within {
  background: var(--campo-fundo-foco);
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.16);
}

.campo-flutuante input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 24px 16px 8px;
  border: 0;
  border-radius: 12px;
  /* Transparente DE PROPOSITO: fundo e borda vivem no conteiner. Aqui entra
     so o gradiente que pinta as letras (ver o bloco da onda, no fim). */
  background-color: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: inherit;
  box-shadow: none;
}

.campo-flutuante input:focus { outline: none; }

.campo-flutuante input:disabled {
  color: var(--tinta-3);
  -webkit-text-fill-color: var(--tinta-3);
  opacity: 1;
}

/* O placeholder existe só para o :placeholder-shown; fica invisível
   em repouso e aparece no foco, como no Link. */
.campo-flutuante input::placeholder { color: transparent; }
.campo-flutuante input:focus::placeholder { color: var(--tinta-3); }

.campo-flutuante label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left top;
  color: var(--tinta-3);
  font-size: 16px;
  line-height: 20px;
  pointer-events: none;
  transition: transform 150ms var(--curva-rotulo);
}

.campo-flutuante input:focus + label,
.campo-flutuante input:not(:placeholder-shown) + label,
.campo-flutuante input:-webkit-autofill + label {
  transform: translateY(-100%) scale(0.825);
}

/* Autofill do navegador: sem isto o Chrome pinta o campo de amarelo claro e
   escreve em preto — ilegivel no escuro. */
.campo-flutuante input:-webkit-autofill,
.campo-flutuante input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px #14141a;
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--tinta);
}

.entrada__dica {
  margin: -4px 4px 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--tinta-3);
}

/* ---------- CTA: cápsula verde de 52px, largura total ---------- */
.entrada__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 0 32px;
  border: 0;
  border-radius: 9999px;
  background: #ffffff;
  color: #08080a;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 300ms var(--curva-principal), box-shadow 150ms ease;
}

/* hover: véu preto de 4%, sem trocar o tom base */
.entrada__cta:hover { background: rgba(255, 255, 255, 0.9); }
.entrada__cta:active { transform: scale(0.95); }
.entrada__cta:focus-visible {
  outline-color: #ffffff;
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--tinta), inset 0 0 0 5.5px #ffffff;
}
.entrada__cta:disabled { cursor: default; opacity: 0.6; }

/* carregando: texto some, spinner central, tamanho intacto */
.entrada__cta.carregando {
  color: transparent;
  pointer-events: none;
}
.entrada__cta.carregando::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(1, 30, 15, 0.25);
  border-top-color: var(--verde-tinta);
  border-radius: 50%;
  animation: entrada-girar 800ms linear infinite;
}

@keyframes entrada-girar { to { transform: rotate(360deg); } }

/* ---------- ajuda / rodapé da tela ---------- */
.entrada__ajuda {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--tinta-3);
}
.entrada__ajuda a { color: var(--tinta); }

/* ---------- responsivo: breakpoint único em 800px ---------- */
@media (max-width: 800px) {
  .entrada__topo { height: 76px; }
  .entrada__conteudo { padding: 20px 24px 32px; justify-content: flex-start; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .entrada__conteudo { animation: none; }
  .campo-flutuante label,
  .campo-flutuante input,
  .entrada__cta { transition: none; }
  .entrada__cta:active { transform: none; }
}

/* ============================================================
   Entrada em dois passos (modelo Link): primeiro o e-mail, depois
   a senha. O passo 2 só existe quando o JavaScript está de pé — sem
   ele o formulário continua clássico, com os dois campos.

   IMPORTANTE: o avanço do passo 1 é LOCAL, não pergunta ao servidor
   se o e-mail existe. Perguntar revelaria quem tem conta na casa
   (enumeração de usuários); o envio segue sendo um só, no fim.
   ============================================================ */

.entrada__passo { display: flex; flex-direction: column; gap: 12px; }
.entrada__passo[hidden] { display: none; }

/* O passo que sai desliza para o lado e some; o que entra vem do
   lado oposto. Duração curta (240ms) para não atrasar quem digita. */
.entrada__passo--saindo {
  animation: passo-sair 200ms var(--curva-principal) forwards;
  pointer-events: none;
}
.entrada__passo--entrando { animation: passo-entrar 240ms var(--curva-principal) both; }

@keyframes passo-sair {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-14px); }
}
@keyframes passo-entrar {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Chip da conta escolhida — mostra o e-mail e volta para trocá-lo */
.entrada__conta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--campo-fundo);
  color: var(--tinta);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 150ms ease;
}
.entrada__conta:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-3); }
.entrada__conta:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--tinta); }

.entrada__conta__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cta);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
}
.entrada__conta__email {
  /* Largura do TEXTO, nao da caixa: o gradiente de 200%% e calculado
     sobre a largura do elemento — esticado, a faixa de luz ficava maior
     que o e-mail e o texto todo mudava de tom junto, em vez de a onda
     correr por ele. O auto empurra o 'trocar' para a direita. */
  flex: 0 1 auto;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.entrada__conta__trocar { font-size: 13px; color: var(--tinta-3); flex: none; }

/* LinkShimmer: o gradiente que corre SOBRE o texto do e-mail enquanto
   a conta é preparada. Receita medida no Link (91.07deg, 200%, 2s). */
.entrada__conta__email.shimmer {
  /* Mesma estrutura de 7 paradas do Link, com o PICO mais claro para a
     onda de luz ficar visivel em texto pequeno (o deles corre num texto
     bem maior, onde o contraste sutil ja aparece). */
  background-image: linear-gradient(
    91.07deg,
    var(--luz-base) 0%, var(--luz-base) 10%, var(--luz-meio) 28%, var(--luz-pico) 40%,
    var(--luz-meio) 52%, var(--luz-base) 62%, var(--luz-base) 100%
  );
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: LinkShimmer 2s linear infinite;
}

@keyframes LinkShimmer {
  from { background-position: 0% 0%; }
  to { background-position: -200% 50%; }
}

/* Erro do passo 1 (formato do e-mail), colado ao campo */
.entrada__erro-campo {
  margin: 0;
  font-size: 13px;
  color: var(--erro-texto);
  animation: passo-entrar 200ms var(--curva-principal) both;
}

@media (prefers-reduced-motion: reduce) {
  .entrada__passo--saindo,
  .entrada__passo--entrando,
  .entrada__conta__email.shimmer,
  .entrada__erro-campo { animation: none; }
  .entrada__conta__email.shimmer {
    -webkit-text-fill-color: var(--tinta);
    color: var(--tinta);
  }
  .entrada__passo--saindo { display: none; }
}

/* ============================================================
   Textos centralizados (pedido do Julio) — a mesma composição da
   tela "Boas-vindas à Link": título, apoio, avisos e ajuda no eixo
   central. Os CAMPOS continuam alinhados à esquerda por dentro,
   senão o texto digitado dança conforme se escreve.
   ============================================================ */
.entrada__titulo,
.entrada__sub,
.entrada__ajuda,
.entrada .alerta,
.entrada__erro-campo { text-align: center; }

/* O chip da conta centraliza o conjunto (avatar + e-mail + trocar) em
   vez de espremer o "trocar" contra a borda */
.entrada__conta { justify-content: center; }
.entrada__conta__email { margin-right: 0; }

/* ---------- campos centralizados também por dentro ----------
   O texto digitado e o rótulo flutuante passam para o eixo central.
   O rótulo deixa de ser ancorado à esquerda: ocupa a linha inteira e
   sobe encolhendo a partir do CENTRO (transform-origin), senão ele
   escorregaria para o lado ao diminuir. */
.entrada .campo-flutuante input { text-align: center; }

.entrada .campo-flutuante label {
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  transform-origin: center top;
}

/* Convite: o chip do e-mail e so informativo — nao da para trocar de conta,
   o convite foi feito para aquele endereco. */
.entrada__conta--estatico { cursor: default; }
.entrada__conta--estatico:hover { background: var(--entrada-chip-fundo, transparent); }
.entrada__dica--centro { text-align: center; }

/* ---------- onda de luz na borda do campo em foco ---------- */
/* A borda e um gradiente animado recortado por mascara: o miolo do campo fica
   de fora, entao so a linha de 1.5px acende. Sem a mascara, o gradiente
   pintaria o campo inteiro e o texto sumiria. */
.campo-flutuante--luz::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1.5px;
  background-image: linear-gradient(
    91.07deg,
    var(--luz-base) 0%, var(--luz-base) 10%, var(--luz-meio) 28%, var(--luz-pico) 40%,
    var(--luz-meio) 52%, var(--luz-base) 62%, var(--luz-base) 100%
  );
  background-size: 200%;
  animation: LinkShimmer 2s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.campo-flutuante--luz:focus-within::before { opacity: 1; }

/* Com a luz acesa, a borda cinza do foco sai de cena para as duas nao
   brigarem pela mesma linha. */
.campo-flutuante--luz:focus-within {
  border-color: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .campo-flutuante--luz::before { animation: none; }
}

/* ---------- ajustes do tema escuro ---------- */
.entrada .mitz-logo__nome { color: #ffffff; }

/* O alerta de erro tambem muda de plano: vermelho claro sobre escuro. */
.entrada .alerta--erro {
  background: rgba(230, 25, 71, 0.12);
  color: #ff8fa6;
  border: 1px solid rgba(230, 25, 71, 0.3);
}

/* A separacao do topo some: o cartao ja separa tudo. */
.entrada__topo { margin-bottom: 20px; }

/* O chip da conta, no escuro */
.entrada__conta {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--borda);
}
.entrada__conta:hover { background: rgba(255, 255, 255, 0.08); }
.entrada__conta__trocar { color: var(--tinta-3); }

/* ============================================================
   A onda de luz DENTRO do campo, enquanto a pessoa digita
   ============================================================
   O texto digitado vira a propria animacao: o gradiente corre atraves das
   letras, no e-mail e na senha. E o que faz a tela parecer viva no momento em
   que a pessoa esta agindo — esperar ela terminar para so entao acender e
   animar a tela errada.

   Sao duas regras, e nao uma, por um motivo pratico: o NEGRITO vale sempre,
   inclusive no placeholder (o campo nao pode mudar de peso no instante em que
   recebe a primeira letra), mas o texto transparente so pode entrar quando ha
   conteudo — no campo vazio, ele apagaria o placeholder junto e o campo
   pareceria em branco.

   Ideia emprestada da tela de login da Batista Caminhoes.
   ============================================================ */
.campo-flutuante input {
  font-weight: 700;
  background-image: repeating-linear-gradient(
    90deg,
    var(--luz-base) 0%,
    var(--luz-meio) 6.25%,
    var(--luz-pico) 12.5%,
    var(--luz-meio) 18.75%,
    var(--luz-base) 25%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* Sem cor propria o cursor sumiria junto com o texto. */
  caret-color: var(--cta);
  animation: onda-no-campo 3s linear infinite;
}

/* So com conteudo: ver o comentario acima. */
.campo-flutuante input:not(:placeholder-shown) {
  -webkit-text-fill-color: transparent;
}

@keyframes onda-no-campo {
  from { background-position: 0% 50%; }
  to { background-position: -200% 50%; }
}

/* O preenchimento automatico do navegador pinta o proprio fundo e ignora o
   recorte do gradiente: ali o texto volta a ser solido, senao some. */
.campo-flutuante input:-webkit-autofill,
.campo-flutuante input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .campo-flutuante input { animation: none; }
}

/* Os bullets da senha em peso maximo: bullet e um glifo como qualquer outro,
   entao engorda junto. No escuro, bullet fino sobre o gradiente quase some. */
.campo-flutuante input[type="password"] {
  font-weight: 800;
  letter-spacing: 0.06em; /* respiro entre os bullets, que sao redondos */
}

/* ---------- tracking e leading por tamanho ---------- */
/* Titulo grande: fecha o espacamento e aperta a entrelinha. */
.entrada__titulo {
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Texto de apoio: tracking neutro e entrelinha folgada — e o que se le, nao
   o que se olha. */
.entrada__sub,
.entrada__dica {
  letter-spacing: 0;
  line-height: 1.5;
}

/* Campos e botao: quase neutro. Texto de interface nao e leitura corrida nem
   display; tracking demais em qualquer direcao atrapalha a conferencia de um
   e-mail digitado. */
.campo-flutuante input,
.campo-flutuante label,
.entrada__cta {
  letter-spacing: -0.005em;
}

/* O e-mail na pastilha e informacao a ser CONFERIDA caractere a caractere:
   tracking levemente positivo separa o que se parece (rn/m, l/I). */
.entrada__conta__email {
  letter-spacing: 0.01em;
}

/* ============================================================
   Quem pediu menos transparencia, ou mais contraste
   ============================================================
   Sao dois ajustes do sistema operacional, independentes do "menos
   movimento" que ja respeitamos. Quem liga essas opcoes normalmente tem
   dificuldade real de leitura — nao e preferencia estetica.
   ============================================================ */

/* Menos transparencia: a superficie fica solida e o desfoque sai. Vidro
   fosco sobre um fundo colorido e exatamente o que atrapalha quem ligou
   isso. */
@media (prefers-reduced-transparency: reduce) {
  .entrada__conteudo {
    background: #0e0e11;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .entrada::before { opacity: 0.2; }
  .entrada::after { display: none; } /* o granulado tambem atrapalha */
}

/* Mais contraste: fundo quase solido, bordas definidas, e o texto do campo
   volta a ser branco solido — o gradiente correndo nas letras e bonito, mas
   e a primeira coisa a sair quando a pessoa pediu contraste. */
@media (prefers-contrast: more) {
  .entrada__conteudo {
    background: #000000;
    border-color: rgba(255, 255, 255, 0.5);
  }
  .campo-flutuante { border-color: rgba(255, 255, 255, 0.55); }
  .campo-flutuante input {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: #ffffff;
  }
  .entrada__sub, .entrada__dica, .campo-flutuante label { color: rgba(255, 255, 255, 0.9); }
  .entrada::before, .entrada::after { display: none; }
}