:root{
  --accent:#3fa06a;
  --accent-hover:#2c7e53;
  --card:rgba(255,255,255,0.05);
  --ink:#fafafa;
  --muted:rgba(255,255,255,0.7);
  --bg:#111;
  --shadow:0 2px 6px rgba(0,0,0,0.25);
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  margin:0;
}

.header{
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; position:relative;
}

.brand{
  font-size:1.4rem; font-weight:700; color:var(--accent);
  text-decoration:none; transition:color .2s;
}
.brand:hover{ color:var(--accent-hover); }

.nav-toggle{
  display:none; /* mostrado no mobile abaixo */
  background:transparent; border:0; color:var(--ink);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:6px 8px;
  border-radius:8px;
}
.nav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.menu{
  list-style:none; display:flex; align-items:center; gap:20px;
  margin:0; padding:0;
}
.menu a{
  color:var(--ink); text-decoration:none; position:relative; transition:color .2s;
}
.menu a:hover{ color:var(--accent); }
.menu a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:var(--accent); transition:width .3s;
}
.menu a:hover::after{ width:100%; }

.menu-right{ margin-left:8px; }

.btn-admin{
  background:var(--accent); color:#fff; padding:6px 12px; border-radius:6px;
  font-weight:600; box-shadow:var(--shadow); transition:transform .25s, background .2s;
}
.btn-admin:hover{ background:var(--accent-hover); transform:translateY(-2px); }

/* Social buttons */
.social{ display:flex; gap:8px; align-items:center; }
.btn-social{
  padding:6px 10px; border-radius:999px; font-weight:600; font-size:.92rem;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  color:var(--ink); text-decoration:none;
}
.btn-social:hover{ border-color:rgba(255,255,255,0.28); }
.btn-social.wa{ border-color:#27d26733; }
.btn-social.wa:hover{ background:#1fa85722; }
.btn-social.ig{ border-color:#ff5ea833; }
.btn-social.ig:hover{ background:#ff5ea81f; }

.footer{
  text-align:center; font-size:.9rem; color:rgba(255,255,255,0.6);
  padding:16px 0; border-top:1px solid rgba(255,255,255,0.1);
}

/* ===== Mobile ===== */
@media (max-width: 820px){
  .nav-toggle{ display:inline-block; }

  /* menu vira dropdown */
  .menu{
    position:absolute; right:12px; top:100%;
    background:rgba(15,15,15,0.96);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    width:min(92vw,420px);
    max-height:0; overflow:hidden;
    flex-direction:column; gap:0; padding:0;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    transition:max-height .28s ease;
  }
  .menu.open{ max-height:80vh; }

  .menu li{ width:100%; border-top:1px solid rgba(255,255,255,0.06); }
  .menu li:first-child{ border-top:0; }
  .menu a{ display:block; padding:12px 14px; }

  .menu-right, .social{
    padding:8px 10px;
    display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start;
  }

  /* limpa sublinhado animado no dropdown para evitar quebra visual */
  .menu a::after{ display:none; }
}