/* R3D · estilo comum da entrada e da pagina inicial.
   Mesma paleta do visualizador 3D, para o app parecer uma peca so. */
:root{
  --bg:#0b0b0c; --surface:#121214; --surface-2:#17171a; --surface-3:#1e1e22;
  --border:#26262b; --border-2:#33333a;
  --text:#ecebe9; --text-2:#96938e; --text-3:#615e5a;
  --accent:#c9a06a; --accent-2:#e2c08f; --accent-soft:rgba(201,160,106,.14);
  --erro:#e08a7c;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;
     -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45}
button,input{font:inherit;color:inherit}
a{color:inherit}

/* ---------------------------------------------------------------- marca */
.mk{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
    background:linear-gradient(145deg,#dcb987,#9a774a);color:#17130e;
    font-weight:700;font-size:12px;letter-spacing:.02em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px -12px rgba(201,160,106,.6)}
.marca{display:flex;align-items:center;gap:12px}
.marca b{display:block;font-size:15px;font-weight:600;letter-spacing:.2em;line-height:1.2}
.marca i{display:block;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------------------------------------------------------------- entrar */
body.entrar{display:grid;place-items:center;
  padding:calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b));
  background:radial-gradient(110% 70% at 50% -10%,#24232b 0%,#131316 50%,#0b0b0c 100%)}
.cartao{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:28px 24px 20px;box-shadow:0 30px 80px -40px #000}
.cartao h1{font-family:var(--serif);font-weight:400;font-size:32px;margin:26px 0 2px;letter-spacing:.01em}
.cartao .sub{color:var(--text-2);font-size:13px;margin-bottom:20px}
.cartao label{display:block;font-size:12px;color:var(--text-2);margin-bottom:14px}
.cartao input{display:block;width:100%;margin-top:6px;padding:12px 13px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border-2);font-size:16px;outline:none;transition:.15s}
.cartao input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.senha{position:relative;display:block}
.senha input{padding-right:46px}
.senha button{position:absolute;right:4px;top:50%;transform:translateY(-50%);margin-top:3px;
  width:38px;height:38px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--text-3)}
.senha svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.erro{min-height:18px;color:var(--erro);font-size:12.5px;margin:-4px 0 10px}
.primario{width:100%;padding:13px;border-radius:10px;border:0;cursor:pointer;font-weight:600;font-size:15px;
  background:linear-gradient(180deg,#d6b07c,#b88f5b);color:#17130e;transition:.15s}
.primario:hover{filter:brightness(1.06)}
.primario:disabled{opacity:.6;cursor:wait}
.cartao footer{margin-top:22px;padding-top:14px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--text-3);text-align:center;line-height:1.5}

/* ---------------------------------------------------------------- inicio */
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
  padding:calc(12px + var(--safe-t)) clamp(16px,4vw,40px) 12px;
  background:rgba(18,18,20,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.topo .mk{width:34px;height:34px;border-radius:9px;font-size:10.5px}
.topo .marca b{font-size:13.5px}
.topo .esp{flex:1}
.quem{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2)}
.quem .av{width:30px;height:30px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-2);
  display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--text)}
.sair{border:1px solid var(--border-2);background:var(--surface-2);border-radius:9px;
  padding:7px 12px;font-size:12.5px;cursor:pointer;color:var(--text-2);transition:.15s}
.sair:hover{color:var(--text);border-color:var(--accent)}

.pagina{max-width:1180px;margin:0 auto;padding:clamp(22px,4vw,44px) clamp(16px,4vw,40px) calc(40px + var(--safe-b))}
.pagina h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,42px);line-height:1.1}
.pagina .lead{color:var(--text-2);margin:6px 0 28px;font-size:14px}
.secao{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* grade de icones: 2 no celular, mais conforme a tela cresce */
.grade{display:grid;gap:clamp(12px,2.2vw,22px);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.proj{display:block;text-decoration:none;border-radius:18px;padding:10px 10px 14px;
  background:var(--surface);border:1px solid var(--border);transition:.18s;outline:none}
.proj:hover,.proj:focus-visible{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 18px 40px -26px rgba(201,160,106,.55)}
.proj .ic{aspect-ratio:1/1;border-radius:14px;display:grid;place-items:center;text-align:center;
  position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.proj .ic .nm{font-family:var(--serif);font-size:clamp(20px,3.2vw,26px);line-height:1;letter-spacing:.04em}
.proj .ic .tg{display:block;margin-top:8px;font-size:7.5px;letter-spacing:.22em;text-transform:uppercase}
.proj .ic .rv{position:absolute;top:8px;right:8px;font-size:9px;font-weight:600;letter-spacing:.06em;
  padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.28);color:rgba(255,255,255,.8)}
.proj h2{font-size:13.5px;font-weight:600;margin:12px 4px 2px;line-height:1.3}
.proj p{font-size:11.5px;color:var(--text-2);margin:0 4px;line-height:1.4}
.proj .mt{display:flex;gap:10px;margin:8px 4px 0;font-size:10.5px;color:var(--text-3)}

.vazio,.carregando{color:var(--text-2);padding:40px 0}

@media (max-width:520px){
  .quem .nome{display:none}
  .topo .marca i{display:none}
}