/* ═══════════════════════════════════════════════════════════════════════
   ENTRAR · CRIAR CONTA · ESQUECI/REDEFINIR SENHA — revamp 14/10/2026
   ═══════════════════════════════════════════════════════════════════════
   A mesma linguagem das entradas do app (app.mcorpolife.com/login, /aluno,
   /pro): título que se forma de areia (js/mm-sand.js), cartão premium,
   vídeo de fundo, celular primeiro. Carregado DEPOIS de mm-page-fixes.css e
   só nas três páginas de entrada; não toca a home nem a navegação.

   ⚠️ Nada aqui muda ids ou atributos usados pelos scripts das páginas e pelo
   js/mm-auth.js. Os avisos de erro/sucesso têm estilo inline posto pelo
   próprio HTML/JS — o restyle vem por seletor de id com !important. */

.login-sec {
  --a-text: #fcf5ee;
  --a-soft: rgba(236, 233, 226, 0.76);
  --a-faint: rgba(236, 233, 226, 0.56);
  --a-line: rgba(252, 245, 238, 0.12);
  --a-lime: #afff38;
  --a-lime-hi: #c8ff72;
  --a-lime-deep: #8fe01e;
  --a-peach: #f7d0bf;
  --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 100svh;
  padding: 6.4rem 1.1rem 2.4rem !important;
}

.login-video {
  filter: saturate(0.7) contrast(1.06) blur(2px);
  transform: scale(1.04);
}

/* ── A abertura (coluna editorial) ─────────────────────────────────────── */
.login-editorial {
  max-width: 36rem !important;
  margin: 0 auto 1.6rem !important;
  animation: auth-up 0.7s var(--a-ease) 0.05s both;
}

.login-eyebrow {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  font-family: "Satoshi", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #e1f5c1 !important;
}

.login-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--a-lime);
  box-shadow: 0 0 0 4px rgba(175, 255, 56, 0.1), 0 0 14px rgba(175, 255, 56, 0.6);
}

.login-eyebrow::after {
  display: none !important;
}

.login-hero {
  font-size: clamp(2.5rem, 11vw, 3.4rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  word-spacing: 0.12em;
  margin: 1rem 0 0.9rem !important;
  text-wrap: balance;
}

.login-hero .sand-accent {
  color: var(--a-lime);
}

.login-lede {
  font-size: 1.06rem !important;
  font-weight: 500;
  color: var(--a-soft) !important;
  animation: auth-up 0.8s var(--a-ease) 1.3s both;
}

/* No celular os três fatos saem: o formulário precisa subir para a dobra. */
.login-facts {
  display: none;
}

/* ── O cartão ──────────────────────────────────────────────────────────── */
.login-card {
  position: relative;
  max-width: 34rem !important;
  margin: 0 auto !important;
  padding: 1.8rem 1.35rem 1.6rem !important;
  border-radius: 28px !important;
  border: 1px solid var(--a-line) !important;
  background: linear-gradient(155deg, rgba(20, 25, 27, 0.94), rgba(8, 10, 12, 0.97)) !important;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  animation: auth-sheet 0.76s var(--a-ease) 0.35s both;
}

.login-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 255, 56, 0.75) 30%, rgba(252, 245, 238, 0.4) 62%, transparent);
}

/* A marca já está na navegação: no cartão ela só repetia. */
.login-card .login-logo {
  display: none !important;
}

.login-card .login-title {
  order: 1 !important;
  font-family: "Special Gothic Expanded One", "Wixmadefordisplay", sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--a-text) !important;
  margin: 0.2rem 0 0.5rem !important;
  line-height: 1.05 !important;
}

.login-card .login-sub {
  display: block !important;
  order: 2 !important;
  font-family: "Satoshi", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--a-soft) !important;
  margin: 0 0 1.4rem !important;
  line-height: 1.55;
}

.login-card .login-sub::after {
  display: none !important;
}

.login-card .login-form {
  order: 3 !important;
}

/* Os campos: caixa grande e legível (lei dos óculos), fio limão no foco. */
.login-field {
  margin-bottom: 1.05rem !important;
}

.login-field .lable {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(252, 245, 238, 0.82) !important;
  margin-bottom: 0.45rem;
}

.login-field .lable::before {
  color: rgba(175, 255, 56, 0.7) !important;
}

.login-form .login-field:nth-of-type(3) .lable::before {
  content: "03";
}

.login-form .login-field:nth-of-type(4) .lable::before {
  content: "04";
}

.login-field::after {
  display: none !important;
}

.login-card .text-field {
  min-height: 3.6rem;
  padding: 0 1.1rem !important;
  border: 1.5px solid rgba(252, 245, 238, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--a-text) !important;
  font-size: 1.1rem !important;
  font-weight: 600;
  transition: border-color 0.28s var(--a-ease), background 0.28s var(--a-ease), box-shadow 0.28s var(--a-ease);
}

.login-card .text-field:hover:not(:disabled) {
  border-color: rgba(252, 245, 238, 0.24) !important;
}

.login-card .text-field:focus {
  border-color: rgba(175, 255, 56, 0.7) !important;
  background: rgba(175, 255, 56, 0.045) !important;
  box-shadow: 0 0 0 4px rgba(175, 255, 56, 0.09);
}

.login-card .text-field::placeholder {
  color: rgba(236, 233, 226, 0.36) !important;
  font-weight: 500;
}

.login-forgot {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  margin: -0.2rem 0 1.2rem !important;
  padding: 0.3rem 0.2rem;
  border-radius: 999px;
}

/* O botão: pílula limão com brilho que atravessa; desabilitado = grafite. */
.login-btn {
  position: relative;
  min-height: 3.75rem;
  overflow: hidden;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--a-lime-hi) 0%, var(--a-lime) 55%, var(--a-lime-deep) 100%) !important;
  color: #0f1311 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 34px rgba(175, 255, 56, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.32s var(--a-ease), box-shadow 0.32s var(--a-ease) !important;
}

.login-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.72s var(--a-ease);
}

.login-btn:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 46px rgba(175, 255, 56, 0.32), 0 0 0 5px rgba(175, 255, 56, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.login-btn:not(:disabled):hover::after {
  transform: translateX(120%);
}

.login-btn:not(:disabled):active {
  transform: scale(0.985) !important;
}

.login-btn:disabled {
  opacity: 1 !important;
  background: linear-gradient(180deg, #22282a 0%, #1b2123 55%, #151a1c 100%) !important;
  color: rgba(252, 245, 238, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(252, 245, 238, 0.1) !important;
}

.login-btn:disabled::after {
  display: none;
}

.login-alt {
  font-size: 1rem !important;
  font-weight: 500;
  color: var(--a-soft) !important;
}

.login-alt a {
  font-weight: 700 !important;
}

/* Avisos: erro em pêssego (nunca vermelho — não é culpa da pessoa),
   sucesso em creme-limão. */
#mm-login-err,
#mm-signup-err,
#rs-err {
  border-radius: 18px !important;
  border: 1.5px solid rgba(247, 208, 191, 0.4) !important;
  background: rgba(247, 208, 191, 0.08) !important;
  color: var(--a-peach) !important;
  font-size: 1rem !important;
  font-weight: 600;
  text-align: left !important;
  animation: auth-stage 0.42s var(--a-ease) both;
}

#mm-signup-ok,
#rs-ok {
  border-radius: 18px !important;
  font-size: 1rem !important;
  font-weight: 600;
  text-align: left !important;
  animation: auth-stage 0.42s var(--a-ease) both;
}

#forgot-success {
  font-size: 1rem !important;
  font-weight: 600;
  text-align: left !important;
}

/* O momento em areia: "Link enviado.", "Conta criada.", "Senha nova salva." */
.auth-moment {
  margin: 0.4rem 0 0.4rem;
  font-family: "Special Gothic Expanded One", "Wixmadefordisplay", sans-serif;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--a-text);
}

.auth-moment .sand-accent {
  color: var(--a-lime);
}

/* Boas-vindas ao entrar: o cartão troca o formulário pela saudação em areia. */
.login-card.is-welcome > :not(.auth-welcome) {
  display: none !important;
}

.auth-welcome {
  order: 0;
  padding: 0.6rem 0 0.4rem;
  animation: auth-stage 0.42s var(--a-ease) both;
}

.auth-welcome-kicker {
  margin: 0 0 0.4rem;
  font-family: "Satoshi", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e1f5c1;
}

.auth-welcome-title {
  font-size: 2.6rem;
}

.auth-welcome-sub {
  margin: 0.8rem 0 0;
  font-family: "Satoshi", sans-serif;
  font-size: 1.05rem;
  color: var(--a-soft);
}

/* Na troca entre "pedir link" e "nova senha" o passo entra suave. */
#step-request,
#step-reset {
  animation: auth-stage 0.52s var(--a-ease) both;
}

/* ── O título de areia ─────────────────────────────────────────────────── */
.sand-wrap {
  position: relative;
  display: block;
}

.sand-canvas {
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.sand-word {
  display: inline-block;
  white-space: nowrap;
}

.sand-ch {
  display: inline-block;
}

[data-sand]:not([data-sand-state="done"]),
[data-sand-state="pending"],
[data-sand-state="run"] {
  opacity: 0;
  filter: blur(6px);
  animation: sand-safety 0s linear 4s forwards;
}

[data-sand-state="done"] {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.62s var(--a-ease), filter 0.62s var(--a-ease);
}

@keyframes sand-safety {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ── Desktop: a coluna editorial à esquerda, o cartão à direita ────────── */
@media screen and (min-width: 992px) {
  .login-sec {
    gap: 4.5rem !important;
    padding: 9rem max(2.5rem, calc((100% - 78rem) / 2)) 5rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) !important;
  }

  .login-editorial {
    margin: 0 !important;
  }

  .login-hero {
    font-size: clamp(3.6rem, 6vw, 6.2rem) !important;
    line-height: 0.9 !important;
    margin: 1.4rem 0 1.4rem !important;
  }

  .login-lede {
    font-size: 1.2rem !important;
    max-width: 32rem !important;
  }

  .login-facts {
    display: block;
    animation: auth-up 0.8s var(--a-ease) 1.6s both;
  }

  .login-card {
    padding: 2.6rem 2.5rem 2.3rem !important;
    animation: auth-up 0.82s var(--a-ease) 0.3s both;
  }

  .login-card .login-title {
    font-size: 2rem !important;
  }
}

/* Celular baixo (teclado aberto): a abertura encolhe. */
@media screen and (max-width: 991px) and (max-height: 640px) {
  .login-lede {
    display: none;
  }
}

@keyframes auth-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-sheet {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-stage {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-editorial, .login-lede, .login-facts, .login-card, #step-request, #step-reset,
  #mm-login-err, #mm-signup-err, #rs-err, #mm-signup-ok, #rs-ok {
    animation: none !important;
  }
  [data-sand], [data-sand-state] {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }
  .login-btn, .login-btn::after, .login-card .text-field {
    transition-duration: 0.01ms !important;
  }
}