/* PIA · login (Fase 2) — painel verde com a estação + formulário.
   Origem: docs/superpowers/prototipo-pia/v3.css (bloco LOGIN) + ajustes do protótipo v4.
   Carregar DEPOIS de pia-tema.css (tokens, .btn, .link, .aviso) e estacao.css (figura). */

/* ---------- grade: no DOM o formulário vem primeiro (Tab e leitor de tela);
   no desktop o painel verde fica à esquerda ---------- */
.login{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);grid-template-areas:"art form";min-height:100vh;min-height:100dvh;background:var(--paper)}
.l-form{grid-area:form}
.l-art{grid-area:art}

/* ---------- painel verde ---------- */
.l-art{position:relative;overflow:hidden;background:radial-gradient(110% 120% at 18% 112%,#0d4a43 0%,var(--g900) 50%,var(--g950) 100%);color:#e5efec;padding:36px 48px 38px;display:flex;flex-direction:column;isolation:isolate}
.l-art::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;mix-blend-mode:overlay;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='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* relevo topográfico (desenhado por pia-login.js) */
.topo{position:absolute;inset:-12%;width:124%;height:124%;pointer-events:none;z-index:-1;transition:transform 900ms var(--ease)}
.topo path{fill:none;stroke:rgba(205,182,126,.15);stroke-width:1;stroke-dasharray:3200;stroke-dashoffset:3200;animation:pia-login-traco 2.6s var(--ease) forwards;animation-delay:calc(var(--k) * 70ms)}
.topo path.hi{stroke:rgba(205,182,126,.42)}
@keyframes pia-login-traco{to{stroke-dashoffset:0}}

/* nome do produto em destaque (o único logo do login fica no cartão do formulário) */
.l-nome{position:relative;display:flex;flex-direction:column;gap:6px}
.pia-nome{font-family:var(--display);font-size:clamp(44px,4.4vw,60px);font-weight:800;line-height:.95;letter-spacing:.02em;color:var(--gold-2)}
.pia-desc{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* estação (figura isométrica de estacao.css/estacao.js) — limitada pela altura da janela */
.l-fig{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;margin:-10px -12px 0;min-height:0}
.l-fig .est-embed{width:100%;max-width:min(720px,calc((100vh - 440px) * 1.185));margin:0 auto}
.l-fig .iso-stage{cursor:pointer;border-radius:var(--r-lg)}
.l-fig .iso-stage:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.l-copy{position:relative;margin-top:6px;max-width:540px}
.l-copy h2{font-family:var(--display);font-size:clamp(28px,2.7vw,40px);line-height:1.04;letter-spacing:-.03em;margin:0 0 12px;color:#fff;font-weight:700}
.l-copy h2 em{font-style:normal;color:var(--gold-2)}
.l-copy p{color:#a9c4bd;font-size:14.5px;margin:0;max-width:450px}
.l-foot{position:relative;margin-top:22px;font-size:12px;color:#8fb0a9}

/* ---------- formulário ---------- */
.l-form{display:flex;align-items:center;justify-content:center;padding:40px 32px}
.card{width:100%;max-width:384px}
.card .logo{display:block;height:46px;width:auto;margin-bottom:36px}
.card h1,.card h2{font-family:var(--display);font-size:28px;letter-spacing:-.025em;margin:0 0 6px;color:var(--g900);font-weight:700}
.card h1:focus,.card h2:focus{outline:0}
.card .sub{color:var(--ink-3);margin:0 0 26px}
.card .aviso .i{margin-top:1px}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.inp{display:flex;align-items:center;gap:8px;height:46px;border:1px solid var(--line-in);background:#fff;border-radius:var(--r);padding:0 6px 0 12px;transition:border-color var(--t2),box-shadow var(--t2)}
.inp:hover{border-color:var(--ink-3)}
.inp:focus-within{border-color:var(--em-d);box-shadow:0 0 0 4px rgba(47,125,111,.18)}
.inp input{border:0;outline:0;background:transparent;flex:1;height:100%;min-width:0;padding:0;font-size:14px}
.inp input::placeholder{color:var(--ink-3);opacity:.8}
.inp>.i{color:var(--ink-3);transition:color var(--t2)}
.inp:focus-within>.i{color:var(--em-d)}
.inp button{background:none;border:0;color:var(--ink-3);padding:7px;display:grid;place-items:center;border-radius:var(--r-sm);transition:background var(--t2),color var(--t2)}
.inp button[hidden]{display:none}
.inp button:hover{background:var(--paper-2);color:var(--ink)}
.inp button[aria-pressed="true"]{color:var(--em-d)}

#entrar{margin-top:8px}
.row-b{margin:16px 0 0;text-align:center;font-size:13px}

.help{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);display:flex;gap:10px;align-items:flex-start}
.help .i{margin-top:2px}
.help a,.contato a{color:var(--g700);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
.help a:hover,.contato a:hover{color:var(--em-d)}

/* painel "Esqueci minha senha" (com o envio desligado traz a nota .nota-rec e, ao enviar, o aviso) */
.pane[hidden]{display:none}
.pane.troca{animation:pia-login-painel 320ms var(--ease)}
@keyframes pia-login-painel{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.selo-mail{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--em-l);color:var(--em-d);margin-bottom:18px}
.selo-mail .i{width:26px;height:26px}
.nota-rec{margin:-14px 0 20px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.nota-rec a{color:var(--g700);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
.contato{display:flex;gap:10px;align-items:center;margin:-8px 0 26px;font-size:14px;color:var(--ink-3)}
/* "Esqueci minha senha" com envio ligado e a tela de nova senha (redefinir.php) */
#enviar-link,#salvar-senha{margin-top:8px}
#form-esq+.btn,#form-nova+.btn{margin-top:12px}
.card .regra{margin:-6px 0 16px;font-size:12.5px;color:var(--ink-3)}
.login.so-form{grid-template-columns:minmax(0,1fr);grid-template-areas:"form"}

.ver{margin-top:30px;font-size:11.5px;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:12px}
.ver .lock{display:inline-flex;gap:6px;align-items:center}
.i-13{width:13px;height:13px}

/* ---------- telas estreitas: some a estação, formulário primeiro ---------- */
@media (max-width:899.98px){
  .login{grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "art"}
  .l-form{padding:32px 16px 36px}
  .card .logo{margin-bottom:28px}
  .l-fig{display:none}
  .l-art{padding:28px 20px 30px}
  .pia-nome{font-size:44px}
  .pia-desc{font-size:12px}
  .l-copy{margin-top:26px}
  .l-copy h2{font-size:28px}
}

/* movimento reduzido: o tema já zera as durações; aqui garantimos o relevo e a figura parados */
@media (prefers-reduced-motion: reduce){
  .topo{transition:none}
  .topo path{animation:none;stroke-dashoffset:0}
  .pane.troca{animation:none}
}