/* Telas de acesso (entrar, criar conta, esqueci a senha, nova senha) —
   painel/acesso.html. Vem DEPOIS do landing.css e usa as cores, a letra,
   os botões (.btn, .marca-btn, .claro) e a faixa do topo de lá: quem sai
   da landing clara cai numa tela do mesmo visual, não no painel antigo
   escuro. Aqui só o que a landing não tem: fundo, cartão, campos, avisos
   e o botão "Mostrar" da senha (estatico/senha.js). */

:root{
  --campo-borda:#8c929b;     /* borda do campo: 3,1:1 no branco (WCAG 1.4.11) */
  --dica:#6b727c;            /* texto de exemplo dentro do campo: 4,8:1 */
  --success:#137a3a;         /* "As senhas conferem." (o JS usa var(--success)) */
  --error:#b42318;           /* "As senhas não conferem." e a borda do aviso */
}

body.acesso{background:var(--gelo)}
.acesso-meio{padding:clamp(32px,7vh,88px) var(--lado) clamp(56px,10vh,112px)}

/* ---------- cartão ---------- */
.acesso-coluna{max-width:448px;margin:0 auto}
.acesso .cartao{background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  padding:clamp(24px,5vw,40px);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 32px -12px rgba(16,24,40,.14)}
.acesso h1{font-size:clamp(28px,1.1rem + 1.4vw,34px);line-height:1.15;letter-spacing:-.03em}
.acesso .sub{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.55}
.acesso .texto{margin-top:14px;color:var(--body);font-size:16px;line-height:1.6}
.acesso .texto strong{color:var(--ink);font-weight:600}
.nota-fina{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.55}
.links{margin-top:20px;text-align:center;color:var(--muted);font-size:15px;line-height:1.7}
.termos{margin-top:8px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---------- campos ---------- */
.acesso form{margin-top:4px}
.acesso label{display:block;margin:20px 0 7px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3}
.acesso input[type=text],.acesso input[type=password],.acesso input[type=email]{
  display:block;width:100%;min-height:48px;padding:0 14px;margin:0;
  background:var(--branco);color:var(--ink);border:1px solid var(--campo-borda);border-radius:10px;
  font:400 16px/1.4 var(--fonte);transition:border-color .15s,box-shadow .15s}
.acesso input::placeholder{color:var(--dica);opacity:1}
.acesso input:hover{border-color:var(--grafite)}
.acesso input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,16,19,.12)}
.acesso input:focus-visible{outline:none}

/* o botão principal: o amarelo da marca. Amarelo sobre branco perde a
   borda (1,05:1), então ele leva o traço mais escuro do amarelo (o mesmo
   do selo da landing) e uma sombra curta */
.acesso .enviar{width:100%;min-height:50px;margin-top:28px;font-size:16px}
.acesso .btn.marca-btn.enviar{border-color:var(--marca-traco);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.acesso .btn.marca-btn.enviar:hover{background:var(--marca-forte);border-color:#b3b612}
.acesso .texto + .btn,.acesso .nota-fina + .btn{margin-top:24px}

/* ---------- avisos ---------- */
.acesso .aviso{margin:18px 0 0;padding:12px 14px;border:1px solid #f4c7c1;border-left:3px solid var(--error);
  border-radius:10px;background:#fef3f2;color:#7a1f16;font-size:15px;line-height:1.5}
.confere{min-height:20px;margin:8px 0 0;font-size:14px;font-weight:500}
.acesso .confere + .enviar{margin-top:16px}

/* ---------- botão "Mostrar" dentro do campo de senha (senha.js) ----------
   No painel as mesmas classes pegam a cor do app.css + tema; aqui, fundo claro */
.campo-senha{position:relative;display:block}
.acesso .campo-senha input{padding-right:96px}
.mostrar-senha{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  min-height:36px;padding:0 12px;border:none;border-radius:7px;background:transparent;
  color:var(--muted);font:600 14px/1 var(--fonte);cursor:pointer}
.mostrar-senha:hover{color:var(--ink);background:#eceef2}
.mostrar-senha:focus-visible{outline:2px solid var(--ink);outline-offset:1px;color:var(--ink)}

/* ---------- criar conta: o porquê ao lado do formulário ---------- */
.criar{display:grid;gap:28px;max-width:448px;margin:0 auto;
  grid-template-areas:"texto" "form" "passos"}
.criar-texto{grid-area:texto}
.criar-form{grid-area:form}
.criar-passos{grid-area:passos}
.criar h1{font-size:clamp(32px,1.2rem + 2.2vw,46px);line-height:1.08;letter-spacing:-.035em}
.valor{margin-top:14px;color:var(--body);font-size:clamp(17px,.95rem + .3vw,19px);line-height:1.55}
.gratis{display:flex;align-items:flex-start;gap:10px;margin-top:16px;color:var(--ink);font-size:16px;font-weight:500;line-height:1.5}
.gratis .ic{flex-shrink:0;margin-top:2px}
/* no cartão do cadastro não há título: o 1º rótulo (ou o aviso) encosta no topo */
.cartao > form:first-child > label:first-of-type,.cartao > .aviso:first-child{margin-top:0}
.criar-passos{padding-top:24px;border-top:1px solid var(--linha-forte)}
.criar-passos h2{font-size:17px;font-weight:600;letter-spacing:-.005em}
.criar-passos ol{list-style:none;counter-reset:passo;margin:14px 0 0;padding:0;display:grid;gap:12px}
.criar-passos li{counter-increment:passo;display:grid;grid-template-columns:28px 1fr;gap:12px;
  align-items:start;color:var(--body);font-size:15.5px;line-height:1.5}
.criar-passos li::before{content:counter(passo);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--marca);color:var(--marca-tinta);
  border:1px solid var(--marca-traco);font-size:14px;font-weight:700;line-height:1}
.criar-passos .nota-fina{margin-top:16px}

@media (min-width:900px){
  .criar{max-width:1000px;grid-template-columns:minmax(0,1fr) 448px;column-gap:clamp(48px,6vw,88px);
    row-gap:40px;grid-template-areas:"texto form" "passos form";
    grid-template-rows:auto 1fr;align-items:start}   /* 1fr: a sobra da altura do formulário fica embaixo */
  .criar-texto{padding-top:12px}
  .criar-form{align-self:start}
  .criar-passos{align-self:start}
}

/* ---------- celular ---------- */
@media (max-width:560px){
  .acesso-meio{padding-top:28px}
  .acesso .cartao{border-radius:14px}
}