/* V12 LEVE - Denis Magnético (11/10/2026, preparado pela VIXCAPTA, não publicado).
   Só duas coisas por cima de estilo.css: cabeçalho em pílula de vidro flutuante e
   botões em pílula com leve brilho. Cores, fundos, seções creme, textos e fontes ficam
   como estão. Blur apenas no cabeçalho. */

:root {
  --v12-vidro: rgba(13, 13, 15, 0.62);
  --v12-vidro-cheio: #100f0d; /* sólido: com transparência o texto do topo aparecia por trás do menu do celular */
  --v12-borda: rgba(255, 255, 255, 0.10);
  --v12-borda-ouro: rgba(240, 214, 138, 0.30);
  --v12-sombra: 0 18px 44px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --v12-topo: 12px;   /* folga entre a faixa de demonstração e a pílula */
  --v12-alt: 64px;    /* altura da pílula */
}
html { scroll-padding-top: calc(var(--v12-alt) + var(--v12-topo) + 20px); }

/* ---------- cabeçalho: pílula de vidro (continua fixo ao rolar) ---------- */
header.top {
  position: sticky;
  top: var(--v12-topo);
  margin: var(--v12-topo) auto 0;
  width: min(1180px, calc(100% - 32px));
  border-radius: 999px;
  background: var(--v12-vidro);
  border: 1px solid var(--v12-borda);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--v12-sombra);
}
header.top .bar { min-height: var(--v12-alt); max-width: none; padding: 0 10px 0 14px; gap: 12px; }
header.top .selo-img { width: 44px; height: 44px; }

/* o topo (foto) sobe por baixo da pílula: nada de faixa creme em volta dela */
.hero.v4 {
  margin-top: calc(-1 * (var(--v12-alt) + var(--v12-topo) + 2px));
  padding-top: calc(var(--v12-alt) + var(--v12-topo) + 2px);
}

nav.main a { border-radius: 999px; padding: 9px 13px; transition: background .2s, color .2s; }
nav.main a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ouro2); }
/* item ativo (quando a página marcar um) em pílula dourada */
nav.main a[aria-current], nav.main a.on, nav.main a.ativo,
.mnav a[aria-current]:not(.btn), .mnav a.on:not(.btn), .mnav a.ativo:not(.btn) {
  background: linear-gradient(135deg, #c79a3e, var(--ouro2));
  color: var(--preto);
}

.menu-btn { border-radius: 999px; padding: 0 18px; border-color: var(--v12-borda-ouro); background: rgba(255, 255, 255, 0.05); }
.menu-btn:hover { background: rgba(255, 255, 255, 0.10); }

/* celular: menu aberto vira um cartão arredondado opaco logo abaixo da pílula
   (por cima do conteúdo, sem empurrar a página) */
.mnav {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  padding: 6px 16px 16px;
  border-radius: 22px;
  background: var(--v12-vidro-cheio);
  border: 1px solid var(--v12-borda);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
  max-height: calc(100vh - 120px);max-height: calc(100dvh - 120px);
  overflow-y: auto;
}
.mnav a { border-top-color: rgba(255, 255, 255, 0.09); }
.mnav a:first-child { border-top: 0; }
.mnav a:not(.btn) { border-radius: 12px; padding-left: 10px; padding-right: 10px; }

/* ---------- botões em pílula, mesmas cores, leve brilho no hover ---------- */
.btn, .f, .sim-tam button, .menu-btn { border-radius: 999px; }
.btn { transition: background .2s, transform .2s, box-shadow .25s, border-color .2s; }
.btn.p { box-shadow: 0 8px 22px -12px rgba(212, 175, 90, 0.55); }
.btn.p:hover { box-shadow: 0 12px 30px -10px rgba(212, 175, 90, 0.8), 0 0 0 1px rgba(240, 214, 138, 0.35); }
.btn.g:hover { box-shadow: 0 0 22px -6px rgba(212, 175, 90, 0.55); }
.f { transition: box-shadow .25s, border-color .2s; }
.f:hover, .sim-tam button:hover { box-shadow: 0 0 18px -6px rgba(212, 175, 90, 0.6); border-color: var(--ouro); }

@media (max-width: 979px) {
  :root { --v12-topo: 10px; --v12-alt: 58px; }
  header.top { width: calc(100% - 24px); }
  header.top .bar { padding: 0 8px 0 10px; }
  header.top .selo-img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  nav.main a, .btn, .f { transition: none; }
  .btn.p:hover { transform: none; }
}