:root{
  --a3-primary:#0d6efd;
  --a3-bg:#f6f7fb;
  --a3-text:#212529;
  --a3-muted:#6c757d;
  --a3-card:#ffffff;
  --a3-border:#e9ecef;
  --a3-radius:16px;
  --a3-shadow:0 8px 24px rgba(0,0,0,.06);
}
html,body{height:100%}
body{background:var(--a3-bg);color:var(--a3-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.a3-navbar{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--a3-border);}
.a3-navwrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;}
.a3-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--a3-primary);text-decoration:none}
.a3-brand:hover{color:var(--a3-primary)}
.a3-logo{height:45px}
.a3-burger{border:none;background:transparent;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.a3-burger:hover{background:#f1f3f5}
.a3-burger .bar{width:22px;height:2px;background:#212529;position:relative;transition:.25s}
.a3-burger .bar::before,.a3-burger .bar::after{content:'';position:absolute;left:0;width:22px;height:2px;background:#212529;transition:.25s}
.a3-burger .bar::before{top:-6px}.a3-burger .bar::after{top:6px}
.a3-burger.open .bar{background:transparent}
.a3-burger.open .bar::before{transform:rotate(45deg);top:0}
.a3-burger.open .bar::after{transform:rotate(-45deg);top:0}
.a3-drawer{position:fixed;inset:56px auto 0 0;width:280px;transform:translateX(-100%);transition:.25s;background:#fff;border-right:1px solid var(--a3-border);z-index:1040;padding:1rem}
.a3-drawer.open{transform:translateX(0)}
.a3-logo{width: 95px;max-width: 180px;height: 95px;max-height: 180px;}
.a3-icon{width: 30px;height: 30px;display: none;}
.a3-login{background-image: url("../assets/img/login.jpg");}
/* estado padrão: invisível e NÃO intercepta eventos */
.a3-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.3);
  opacity:0; visibility:hidden;
  pointer-events:none;          /* <— importante */
  transition:.25s;
  z-index:1035;
}
/* quando aberto: visível e passa a interceptar (para clicar e fechar) */
.a3-backdrop.show{
  opacity:1; visibility:visible;
  pointer-events:auto;          /* <— importante */
}
@media (min-width:992px){
  .a3-burger{display:none}
  .a3-drawer{position:static;transform:none;width:auto;border-right:0;inset:auto;padding:0}
  .a3-backdrop{display:none}
  .a3-nav{display:flex;gap:.5rem}
}
.a3-nav a{display:block;padding:.6rem 1rem;color:var(--a3-text);text-decoration:none;border-radius:10px}
.a3-nav a.active{background:#e7f1ff;color:var(--a3-primary);font-weight:600}
.a3-nav a:hover{background:#f8f9fa}
.a3-main{padding:2rem 0}
.a3-hero{background:#fff;border:1px solid var(--a3-border);border-radius:var(--a3-radius);box-shadow:var(--a3-shadow);overflow:hidden}
.a3-hero-img{width:100%;height:100%;object-fit:cover}
.a3-card{background:#fff;border:1px solid var(--a3-border);border-radius:var(--a3-radius);box-shadow:var(--a3-shadow);padding:1.25rem}
.a3-footer{border-top:1px solid var(--a3-border);background:#fff;padding:1rem 0;margin-top:3rem}
.a3-link{text-decoration:none;color:var(--a3-text)}
.a3-link:hover{color:var(--a3-primary)}


/* ===== Altura padrão do footer (ajuste se quiser) ===== */
:root { --footer-h: 70px; }

/* --- footer fixo sobreposto no fundo (overlay) --- */
/* Compensar o overlay: empurra o conteúdo pra cima do footer */
body, main {
  padding-bottom: var(--footer-h);
}

/* ===== Footer Dark (fixo no fundo) ===== */
.a3-footer-dark {
  background: #000;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 0;                      /* sem padding extra, controlado pela altura */
  height: var(--footer-h);         /* mesma altura do header se quiser */
  display: flex;
  align-items: center;

  /* FIXO no fundo e largura total */
  position: fixed;
  left: 0; right: 0; bottom: 0;    /* = width total + colado no rodapé */
  z-index: 1030;
}

/* Container interno ocupando largura total */
.a3-footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Ícones sociais */
.a3-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
}
.a3-social a:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.5);
}
.a3-social a.facebook:hover  { color:#1877F2; }
.a3-social a.instagram:hover { color:#E4405F; }
.a3-social a.x-twitter:hover { color:#1DA1F2; }
.a3-social a.linkedin:hover  { color:#0A66C2; }
.a3-social a.youtube:hover   { color:#FF0000; }

/* Links */
.a3-footer-links a {
  color: #fff;
  text-decoration: none;
}
.a3-footer-links a:hover {
  color: var(--a3-primary);
  text-decoration: none;
}


/* ===== Mobile ===== */
@media (max-width: 768px){
  /* footer mais confortável no mobile: altura fluida + respiro */
  .a3-footer-dark{
    height:auto;
    padding:12px 0;            /* espaço vertical sem “prender” a altura */
  }
  .a3-footer-grid{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
  .a3-social{ justify-content:center; gap:10px; }
  .a3-footer-links{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;
  }
}

/* ===== (Opcional) Se você estava usando sticky-footer por flex no body, pode remover isto.
   Não é obrigatório para o footer FIXO, mas não atrapalha. Deixo como estava: ===== */
/* ---footer- manter o footer no fundo da página --- */
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1; /* força o conteúdo a ocupar o espaço restante */
}