/* ==========================================================================
   Tela de entrada (login) — também é a vitrine do produto.
   Quem chega no endereço pela primeira vez cai aqui, então a página precisa
   explicar o que é o sistema, não só pedir e-mail e senha.
   ========================================================================== */

body.pagina-entrada {
  padding: 0;
  /* dvh e não vh: no celular a barra do navegador entra e sai, e com vh a
     página dá um pulo na primeira rolagem. */
  min-height: 100dvh;
  background: var(--fundo);
}

.entrada {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100dvh;
  max-width: none;
  margin: 0;
}

/* --- Lado da apresentação --- */

/* O fundo é uma base azul-tinta ESCURA com duas luzes radiais, não um
   gradiente diagonal de ponta a ponta. Diagonal de azul claro pra azul médio é
   o fundo que todo site gerado por IA tem — e, pior, deixa o texto branco com
   contraste bom em cima e ruim embaixo. Partindo do escuro, o texto tem
   contraste parelho na coluna inteira, e as luzes dão a profundidade que o
   gradiente reto não dá. */
.entrada-pitch {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(59, 130, 246, 0.30) 0%, transparent 55%),
    radial-gradient(90% 70% at 95% 100%, rgba(37, 99, 235, 0.26) 0%, transparent 60%),
    #0b1220;
  color: #fff;
  padding: var(--e7) var(--e6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Um grão fino por cima de tudo. É o que tira a aparência de vetor chapado:
   sem textura nenhuma, uma área grande de cor sólida parece um preenchimento
   de software, não uma superfície. Fica atrás do conteúdo e não captura
   clique. O SVG é inline (data:) porque o projeto não carrega arquivo de
   fora. */
.entrada-pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='0.14'/%3E%3C/svg%3E");
}

.entrada-conteudo { max-width: 520px; margin-left: auto; margin-right: var(--e5); width: 100%; }

.marca {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e6);
}

.marca-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #93c5fd;
  display: inline-block;
}

/* O título é a primeira coisa que alguém lê ao descobrir o sistema: ele
   precisa ter peso de verdade, não ser um texto um pouco maior que o resto. */
.entrada-pitch h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: var(--e4);
}

/* Linha de texto corrido confortável tem ~65 caracteres. Mais que isso e o
   olho se perde na volta pra linha seguinte. */
.entrada-sub {
  font-size: 1.06rem;
  line-height: 1.6;
  color: rgba(226, 237, 255, 0.82);
  margin: 0 0 var(--e6);
  max-width: 46ch;
  text-wrap: pretty;
}

.recursos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e6);
  display: grid;
  gap: var(--e4);
}

/* Em duas colunas os seis recursos param de ser uma lista comprida de rolar e
   viram um quadro que se lê de relance — que é o tempo que alguém dá pra uma
   tela de login. */
.recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e5); }

.recurso { display: flex; gap: var(--e3); align-items: flex-start; }

/* O ícone ganha uma caixinha própria: solto, ele some no fundo escuro; com a
   caixa, a lista tem uma coluna visual que guia o olho de item em item. */
.recurso svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 9px;
  background: rgba(147, 197, 253, 0.12);
  border: 1px solid rgba(147, 197, 253, 0.16);
  color: #bfdbfe;
}

.recurso-titulo { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; text-wrap: balance; }
.recurso-texto {
  font-size: 0.875rem;
  color: rgba(226, 237, 255, 0.7);
  line-height: 1.5;
  margin-top: 3px;
  text-wrap: pretty;
}

/* O selo é a última coisa antes de decidir criar conta, então ele se destaca
   do fundo em vez de ser mais um retângulo translúcido. O ponto verde é o
   mesmo verde de "deu certo" do resto do sistema. */
.selo-teste {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 0.5rem 1.1rem 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.95);
  align-self: flex-start;
  backdrop-filter: blur(6px);
}

.selo-teste::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}

/* --- Lado do acesso --- */

/* Do lado do acesso o fundo não é branco liso: uma malha de pontos bem fraca
   e um clarão vindo de trás do cartão. Chapado, esse lado parecia folha em
   branco ao lado de um painel trabalhado — a página inteira ficava torta.
   A malha some atrás do cartão (a máscara apaga ela nas bordas), então o
   formulário continua sendo a única coisa que o olho procura. */
.entrada-acesso {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--e6) var(--e5);
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(37, 99, 235, 0.07) 0%, transparent 70%),
    var(--fundo);
}

.entrada-acesso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--borda-forte);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 45%, transparent 30%, #000 85%);
  mask-image: radial-gradient(75% 60% at 50% 45%, transparent 30%, #000 85%);
}

/* O cartão flutua sobre a malha: fundo opaco e sombra mais funda que a dos
   painéis internos do sistema, porque aqui ele é o assunto da tela. */
.entrada-acesso .auth-card {
  margin-bottom: 0;
  box-shadow: var(--sombra-lg);
}

.chamada-cadastro {
  width: 100%;
  max-width: 380px;
  margin-top: var(--e4);
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-align: center;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.chamada-cadastro .btn {
  margin-top: var(--e3);
  width: 100%;
  text-decoration: none;
  display: block;
}

.marca-mobile { display: none; }

/* --- Telas estreitas: o acesso vem primeiro, a apresentação embaixo --- */

@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; min-height: auto; }

  /* Quem já é cliente abre no celular pra usar, não pra ler propaganda:
     o formulário vem antes, e a apresentação fica para quem rolar. */
  .entrada-acesso { order: 1; padding-top: var(--e5); }
  .entrada-pitch { order: 2; padding: var(--e6) var(--e4); }
  .entrada-conteudo { margin: 0 auto; }

  .marca-mobile {
    display: flex;
    justify-content: center;
    margin-bottom: var(--e4);
    color: var(--primaria);
  }
  .marca-mobile .marca-ponto { background: var(--primaria); }
  .entrada-pitch .marca { display: none; }
  /* Duas colunas de recurso não cabem no celular: espremidas, o texto quebra
     palavra sim palavra não. Volta pra uma. */
  .recursos { grid-template-columns: 1fr; gap: var(--e4); }
}

/* --- Cabecalho da marca e vantagens na tela de cadastro --- */

.marca-cadastro {
  color: var(--primaria);
  margin-bottom: var(--e4);
  font-size: 1.15rem;
}

.marca-cadastro .marca-ponto { background: var(--primaria); }

.vantagens {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e5);
  display: grid;
  gap: var(--e2);
}

.vantagens li {
  font-size: 0.88rem;
  color: var(--texto-suave);
  padding-left: 1.5rem;
  position: relative;
}

/* Visto desenhado em CSS: nao depende de fonte de icone nem de imagem */
.vantagens li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35rem;
  width: 5px;
  height: 9px;
  border: solid var(--sucesso);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Página 404 --- */

.erro-404 { text-align: center; }

/* O número é grande mas discreto: ele identifica o problema sem gritar, e o
   que interessa de verdade é a frase embaixo e o botão de voltar. */
.erro-404-codigo {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 var(--e2);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.erro-404 .marca { justify-content: center; }
.erro-404 .botoes { justify-content: center; }
.erro-404 .btn { flex: 0 1 auto; min-width: 220px; text-decoration: none; }

/* Botao "Entrar com o Mercado Livre" (amarelo do ML, texto escuro) e o
   separador "ou" entre ele e o formulario de e-mail. */
.btn-ml {
  width: 100%;
  background: #ffe600;
  color: #2d3277;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 700;
  text-decoration: none;
}
.btn-ml:hover:not(:disabled) { filter: brightness(0.97); }
.ajuda-ml { text-align: center; margin: 0.5rem 0 0; font-size: 0.8rem; }
.separador-ou {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
  color: var(--texto-fraco);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.separador-ou::before, .separador-ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }