/* ============================================================
   TOKENS — idênticos ao site institucional
   ============================================================ */
:root{
  --ink:#241F2B;
  --muted:#7C7A82;
  --ink-soft:#5F5768;
  --line:#EAEAEC;
  --line-strong:#DBDBDF;
  --accent:#5B3A73;
  --accent-deep:#40295A;
  --accent-soft:#F2E9F5;
  --green:#3C6E47;
  --red:#A23E30;
  --lilac-01:#FBF8FD;
  --lilac-04:#DCCBE8;
  --radius-campo:18px;
  --grad:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  --grad-deep:linear-gradient(150deg,#4B2F63 0%,#33204A 55%,#2A1A3E 100%);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;
  /* sem zoom por toque duplo; pinça e rolagem continuam (ver app.css) */
  touch-action:manipulation;
}
html{overflow-x:clip;-webkit-text-size-adjust:100%;touch-action:manipulation;}
body{
  min-height:100vh;          /* fallback p/ iOS < 15.4 */
  min-height:100dvh;
  background:#fff;
  color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
form{margin:0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;}
[hidden]{display:none !important;}

/* ornamentos abstratos — mesmos do hero do site */
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.orb-a{width:660px;height:660px;top:-260px;left:-200px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);}
.orb-b{width:600px;height:600px;bottom:-260px;right:-200px;background:radial-gradient(circle,rgba(160,118,44,.16),transparent 70%);}
.mesh{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.32;
  background-image:radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 40% 45%, #000 4%, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 60% at 40% 45%, #000 4%, transparent 70%);
}

/* ============================================================
   PAINEL ESQUERDO — MARCA
   ============================================================ */
.marca{
  position:relative;overflow:hidden;overflow:clip;
  background:var(--grad-deep);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(52px + env(safe-area-inset-top)) 60px calc(46px + env(safe-area-inset-bottom));
}
.marca > a,
.marca > .marca-corpo{position:relative;z-index:1;}
.marca-logo{height:74px;width:auto;}
.marca-corpo{margin:auto 0;}
.marca-kicker{
  font-size:clamp(24px,2.7vw,34px);line-height:1.28;font-weight:800;letter-spacing:-.02em;
  margin:0 0 20px;max-width:16ch;text-wrap:balance;
}
.marca-texto{font-size:15px;line-height:1.75;color:rgba(255,255,255,.8);margin:0;max-width:38ch;}

/* ============================================================
   ESTRUTURA — COLUNA DO FORMULÁRIO
   ============================================================ */
.auth{
  position:relative;z-index:1;background:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:calc(40px + env(safe-area-inset-top)) 44px calc(36px + env(safe-area-inset-bottom));
}
.auth-inner{width:100%;max-width:400px;}
.card{width:100%;background:#fff;padding:0;}

h1{font-size:28px;line-height:1.14;letter-spacing:-.024em;font-weight:800;margin:0 0 10px;}
.sub{font-size:15px;line-height:1.65;color:var(--ink-soft);margin:0 0 26px;}
.sub b{color:var(--accent-deep);font-weight:700;word-break:break-word;}

/* A etapa do nome é a única sem subtítulo. O .sub carregava 26px de respiro
   antes do formulário; sem ele o título encostaria no campo, quebrando o ritmo
   das outras etapas. O espaço vem para o h1 só nesta etapa. */
#stepNome h1{margin-bottom:26px;}

/* ============================================================
   CAMPOS
   ============================================================ */
.field{margin-bottom:14px;}
.field label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;padding-left:2px;
}
.field input{
  width:100%;height:54px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;
  padding:0 21px;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:600;
  transition:border-color .16s, box-shadow .16s;
}
.field input::placeholder{color:#B4B2BA;font-weight:500;}
.field input:hover{border-color:var(--lilac-04);}
/* mesmo destaque de foco nos dois tipos de campo */
.field input:focus, .otp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.field input:disabled{background:#FAFAFB;color:var(--muted);}
.field.invalid input{border-color:var(--red);}
.field.invalid input:focus{box-shadow:0 0 0 4px rgba(162,62,48,.12);}

.err{
  display:flex;align-items:flex-start;gap:7px;
  font-size:13.5px;line-height:1.5;font-weight:600;color:var(--red);
  margin:10px 2px 0;min-height:0;
}
.err svg{width:14px;height:14px;flex:none;margin-top:1px;}
.err:empty{display:none;}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:15.5px;font-weight:700;
  border-radius:999px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:filter .16s, transform .16s, background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn-block{width:100%;height:54px;padding:0 22px;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(64,41,90,.7);}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(1px);}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none !important;filter:none !important;}
.btn.loading{pointer-events:none;}
.btn.loading .btn-label{opacity:.35;}
.spin{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:2.4px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.link-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;font-weight:700;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:var(--accent-deep);}
.link-btn[disabled]{color:var(--muted);cursor:not-allowed;text-decoration:none;}

/* ============================================================
   CÓDIGO DE 6 DÍGITOS
   ============================================================ */
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:4px;}
.otp input{
  width:100%;height:60px;min-width:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-campo);background:#fff;
  text-align:center;font-family:inherit;font-size:23px;font-weight:800;color:var(--ink);
  padding:0;
  transition:border-color .16s, box-shadow .16s, background .16s, opacity .16s;
  -moz-appearance:textfield;
}
.otp input::-webkit-outer-spin-button,.otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.otp input.filled{background:var(--lilac-01);border-color:var(--lilac-04);}
.otp input:disabled{opacity:.6;background:#FAFAFB;}
.otp.invalid input{border-color:var(--red);}
.otp.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97);}
@keyframes shake{
  10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-7px);} 40%,60%{transform:translateX(7px);}
}

.reenviar{font-size:14px;line-height:1.6;color:var(--ink-soft);text-align:left;margin:20px 0 0;padding-left:2px;}
.contador{font-variant-numeric:tabular-nums;}

.voltar{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;margin:0 0 18px;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);
  transition:color .16s;
}
.voltar:hover{color:var(--accent);}
.voltar svg{width:15px;height:15px;}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  text-align:left;font-size:14px;line-height:1.7;color:var(--ink-soft);
  margin:26px 0 0;padding-left:2px;
}
.rodape a{color:var(--accent);font-weight:700;text-decoration:none;}
.rodape a:hover{text-decoration:underline;text-underline-offset:3px;}
.legal{
  text-align:left;font-size:12px;line-height:1.7;color:var(--muted);
  margin:12px 0 0;max-width:42ch;padding-left:2px;
}
.legal a{color:var(--ink-soft);}

/* ============================================================
   TRANSIÇÃO ENTRE ETAPAS
   ============================================================ */
.step{animation:fade .34s cubic-bezier(.2,.7,.3,1);}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.ok{
  display:flex;align-items:center;gap:9px;justify-content:flex-start;
  font-size:15px;font-weight:700;color:var(--green);margin:0;
}
.ok svg{width:18px;height:18px;}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .marca{padding:44px 40px;}
  .auth{padding-left:36px;padding-right:36px;}
}
@media (max-width:900px){
  body{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .marca{
    padding:calc(26px + env(safe-area-inset-top)) 22px 26px;
    align-items:center;text-align:center;justify-content:center;
  }
  .marca-logo{height:58px;}
  .marca-corpo{margin:18px 0 0;}
  .marca-kicker{
    font-size:clamp(17px,4.6vw,21px);line-height:1.34;
    max-width:24ch;margin:0 auto;
  }
  .marca-texto{display:none;}
  .auth{padding:34px 22px calc(30px + env(safe-area-inset-bottom));justify-content:flex-start;}
  .auth-inner{max-width:430px;margin:0 auto;}
}
@media (max-width:420px){
  .auth{padding-left:18px;padding-right:18px;}
  .marca-logo{height:52px;}
  h1{font-size:24px;}
  .otp{gap:6px;}
  .otp input{height:54px;border-radius:15px;font-size:20px;}
}