/* Telas de entrada (login e criar senha). Layout: painel da marca com grade de planta + cartão do formulário */
:root{
  --bg:#eef2ee; --surface:#ffffff; --surface-2:#f6f8f5; --ink:#16241c; --muted:#5b6b61; --line:#d6ded7;
  --brand:#1e4d33; --brand-deep:#123323; --brand-ink:#eef5f0; --accent:#1f6b43; --gold:#c9a24f; --gold-ink:#1a1408; --danger:#b23b2a; --ok:#2c7a4b;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1511; --surface:#16201a; --surface-2:#1b271f; --ink:#e4ebe6; --muted:#93a39a; --line:#2a3a30;
  --brand:#16402a; --brand-deep:#0b2216; --accent:#6cc191; --gold:#d8b263; --danger:#ec8572; --ok:#6cc191; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}

/* painel da marca */
.hero{position:relative;overflow:hidden;color:var(--brand-ink);
  background:
    linear-gradient(rgba(216,178,99,.07) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(216,178,99,.07) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(216,178,99,.13) 1px,transparent 1px) 0 0/140px 140px,
    linear-gradient(90deg,rgba(216,178,99,.13) 1px,transparent 1px) 0 0/140px 140px,
    linear-gradient(155deg,var(--brand) 0%,var(--brand-deep) 100%);
  padding-block:max(40px,env(safe-area-inset-top,0px)) 40px;
  padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:48px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hero::after{content:"";position:absolute;right:-60px;bottom:-40px;width:420px;height:420px;opacity:.07;pointer-events:none;
  background:url("/logo.svg") center/contain no-repeat;filter:grayscale(1) brightness(3)}
.marca{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.marca img{width:52px;height:52px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.marca b{display:block;font-family:var(--f-display);font-size:26px;line-height:1;letter-spacing:.01em}
.marca span{display:block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold);margin-top:4px}
.chamada{position:relative;z-index:1;max-width:30rem}
.chamada h1{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1.02;margin:0 0 14px;text-wrap:balance}
.chamada h1 em{font-style:normal;color:var(--gold)}
.chamada p{margin:0;color:rgba(238,245,240,.78);font-size:16.5px;max-width:28rem}
.recursos{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;max-width:32rem}
.recursos li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:rgba(238,245,240,.9)}
.recursos svg{flex:none;width:22px;height:22px;margin-top:1px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recursos b{display:block;color:var(--brand-ink);font-weight:600}
.rodape-hero{position:relative;z-index:1;font-size:12.5px;color:rgba(238,245,240,.55);font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase}

/* formulário */
.lado{display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-block:40px max(24px,env(safe-area-inset-bottom,0px));
  padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px))}
.cartao{width:min(400px,100%);display:flex;flex-direction:column;gap:18px}
.cartao h2{font-family:var(--f-display);font-size:32px;line-height:1.05;margin:0}
.cartao .sub{margin:-10px 0 4px;color:var(--muted)}
form{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 10px 30px rgba(10,30,18,.08)}
label{font-size:13px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.campo{position:relative;display:flex;align-items:center}
.campo svg{position:absolute;left:12px;width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.campo input{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:12px 12px 12px 40px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.campo input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ver{position:absolute;right:6px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:600;padding:6px 8px;border-radius:6px;cursor:pointer}
.ver:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.entrar{font:inherit;font-size:16px;font-weight:600;padding:13px;border:0;border-radius:8px;background:var(--accent);color:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.entrar:hover{filter:brightness(1.07)}
.entrar:disabled{opacity:.6;cursor:wait}
.err{color:var(--danger);font-size:14px;margin:0;min-height:0}
.err:empty{display:none}
.ajuda{font-size:13.5px;color:var(--muted);margin:0;text-align:center}
.seguro{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--muted)}
.seguro svg{width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.marca-mobile{display:none}

/* celular */
@media (max-width:860px){
  body{grid-template-columns:1fr;display:block}
  .hero{padding:max(22px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 30px max(20px,env(safe-area-inset-left,0px));gap:18px}
  .hero::after{width:240px;height:240px;right:-50px;bottom:-60px}
  .chamada h1{font-size:30px;margin-bottom:8px}
  .chamada p{font-size:15px}
  .recursos{grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:16px}
  .recursos li{font-size:13px}
  .recursos li span{display:none}
  .rodape-hero{display:none}
  .lado{padding:0 max(16px,env(safe-area-inset-right,0px)) max(28px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));margin-top:-14px}
  .cartao{gap:14px}
  .cartao h2{font-size:26px;margin-top:22px}
  form{padding:20px}
}
@media (prefers-reduced-motion:no-preference){
  .cartao{animation:sobe .45s ease-out both}
  @keyframes sobe{from{transform:translateY(8px)}to{transform:none}}
}