/* Identidade visual da Bagin (BAGIN/BAGIN-Design-System-completo): nove cores oficiais,
   Moderustic no texto, Antonio Bold em caixa alta nos títulos, blocos chapados sem sombra. */
:root {
  --peacock: #024552;
  --lemon: #cfe600;
  --mint: #e9f3f4;
  --malachite: #2fe96c;
  --gray: #d2caba;
  --shadow: #7b7763;
  --tomato: #fc6d53;
  --magenta: #fc9bcf;
  --celeste: #7abde0;
  --white: #fff;
  --raio-p: 12px;
  --raio: 24px;
  --pilula: 999px;
  --fonte: 'Moderustic', 'Helvetica Neue', Arial, sans-serif;
  --fonte-titulo: 'Antonio', 'Arial Narrow', Impact, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--mint); color: var(--peacock); font: 400 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
h1 { font-family: var(--fonte-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1; margin: 0; }
h2 { font-weight: 700; margin: 0; line-height: 1.2; }
button, input { font: inherit; color: inherit; }
a { color: var(--peacock); text-decoration: underline; text-decoration-color: var(--malachite); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--peacock); }
::selection { background: var(--lemon); color: var(--peacock); }
[hidden] { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border: 1px solid var(--peacock); border-radius: var(--pilula); background: var(--white); color: var(--peacock); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--mint); }
.btn:focus-visible, .input:focus-visible, .cartao:focus-visible { outline: 2px solid var(--peacock); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--malachite); border-color: var(--malachite); font-weight: 700; }
.btn.primario:hover { background: color-mix(in srgb, var(--malachite) 88%, var(--peacock)); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.largo { width: 100%; min-height: 46px; font-size: 15px; }

.input { width: 100%; min-height: 44px; padding: 8px 12px; background: var(--mint); border: 1px solid var(--peacock); border-radius: var(--raio-p); font-size: 15px; }
.input:focus { border-color: var(--malachite); background: var(--white); outline: none; }
.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }

.aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--raio-p); font-size: 13.5px; }
.aviso.erro { background: color-mix(in srgb, var(--tomato) 18%, var(--white)); }
.aviso.ok { background: color-mix(in srgb, var(--malachite) 22%, var(--white)); }

/* Login */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px 16px; background: var(--peacock); }
.login-logo { display: block; width: 230px; max-width: 64vw; height: auto; }
.caixa { width: 100%; max-width: 420px; padding: 30px 28px; background: var(--white); border-radius: var(--raio); }
.caixa h1 { font-size: 36px; margin-bottom: 10px; }
.caixa p { margin: 0 0 18px; }
.selo { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: var(--pilula); background: var(--lemon); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.alternativas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 13.5px; }

/* Barra superior */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 24px; background: var(--peacock); color: var(--white); }
.topo img { display: block; height: 24px; width: auto; }
.topo .cresce { flex: 1; }
.topo .quem { color: var(--mint); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.topo .btn { min-height: 34px; font-size: 13px; }
.topo .btn.fantasma { color: var(--white); }
.topo .btn.fantasma:hover { background: color-mix(in srgb, var(--white) 12%, transparent); }

/* Tela de escolha */
.pagina { max-width: 1040px; margin: 0 auto; padding: 32px 24px 56px; }
.pagina > h1 { font-size: 40px; margin-bottom: 6px; }
.pagina > p { margin: 0 0 24px; color: var(--shadow); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cartao { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 22px; border-radius: var(--raio); background: var(--white); color: var(--peacock); text-decoration: none; border: 2px solid transparent; transition: border-color .15s; }
.cartao:hover { border-color: var(--malachite); }
.cartao .icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--lemon); font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; }
.cartao h2 { font-family: var(--fonte-titulo); text-transform: uppercase; font-size: 24px; }
.cartao p { margin: 0; color: var(--shadow); font-size: 13.5px; }
.cartao .rodape { margin-top: auto; font-weight: 700; font-size: 13.5px; }
.cartao.breve { cursor: default; opacity: .6; }
.cartao.breve:hover { border-color: transparent; }
.cartao.breve .rodape { font-weight: 600; color: var(--shadow); }

@media (max-width: 560px) {
  .topo { padding: 10px 16px; }
  .topo .quem { display: none; }
  .pagina { padding: 24px 16px 40px; }
  .pagina > h1 { font-size: 32px; }
}