/* V12 leve - LUMAXX (cópia do portfólio). Entra depois de estilo.css / revenda.css.
   Só duas coisas: cabeçalho em pílula de vidro flutuante e botões em pílula.
   O cabeçalho continua escuro nos dois temas (o logo LUMAXX é branco). */

:root {
  /* tema claro: a pílula fica bem escura sobre o fundo branco (logo branco precisa de contraste) */
  --v12-pilula: rgba(6, 6, 5, 0.9);
  --v12-borda: rgba(255, 255, 255, 0.10);
  --v12-sombra: 0 16px 40px -18px rgba(0, 0, 0, 0.55), 0 8px 26px -18px rgba(254, 254, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root[data-tema="escuro"] {
  --v12-pilula: rgba(17, 18, 20, 0.62);
  --v12-borda: rgba(255, 255, 255, 0.11);
  --v12-sombra: 0 18px 44px -18px rgba(0, 0, 0, 0.85), 0 8px 26px -18px rgba(254, 254, 34, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- cabeçalho: pílula de vidro flutuante (continua fixo) ---------- */
header {
  position: sticky;
  top: 12px;
  margin: 14px auto 0;
  width: min(1180px, calc(100% - 32px));
  border-radius: 999px;
  background: var(--v12-pilula);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--v12-borda);
  border-bottom: 1px solid var(--v12-borda);
  box-shadow: var(--v12-sombra);
}
/* o fio de luz reto do original não acompanha a pílula */
header::after { display: none; }
header .nav { height: 60px; max-width: none; padding-inline: 18px 10px; }

nav ul { gap: 4px; }
nav ul a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
}
nav ul a::after { display: none; }
nav ul a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
nav ul a[aria-current="page"],
nav ul a[aria-current="page"]:hover {
  color: #000;
  background: var(--destaque);
  font-weight: 700;
  box-shadow: 0 0 18px -4px rgba(254, 254, 34, 0.7);
}
header .tema { border-radius: 999px; }

/* ---------- celular: menu aberto vira cartão arredondado opaco ---------- */
.menu-cel summary {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  padding: 7px 18px;
  color: #fff;
}
.menu-cel[open] summary { background: var(--destaque); color: #000; border-color: var(--destaque); }
.menu-cel ul {
  top: 52px;
  right: -4px;
  min-width: 230px;
  padding: 8px;
  border-radius: 20px;
  background: #0b0b09;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.8);
}
.menu-cel li a { border-radius: 14px; padding: 11px 16px; }
.menu-cel li a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.menu-cel li a[aria-current="page"] { color: #000; background: var(--destaque); font-weight: 700; }

@media (max-width: 980px) {
  header { top: 8px; margin-top: 10px; width: calc(100% - 24px); }
  header .nav { height: 58px; padding-inline: 16px 8px; }
}

/* ---------- barra flutuante de verdade (15/10/2026) ----------
   O topo da página (banner, faixa de título ou topo da revenda) sobe por trás da barra:
   some a faixa branca entre a faixa de prévia e a foto. --v12-sobe = margem de cima da
   barra + altura dela com as bordas; o topo ganha esse mesmo tanto de espaço em cima. */
:root { --v12-sobe: 76px; }
@media (max-width: 980px) { :root { --v12-sobe: 70px; } }
header { margin-bottom: calc(-1 * var(--v12-sobe)); }
main > .hero:first-child { padding-top: calc(80px + var(--v12-sobe)); }
main > .topo:first-child { padding-top: calc(44px + var(--v12-sobe)); }
main > .rv-hero:first-child { padding-top: calc(clamp(56px, 9vw, 110px) + var(--v12-sobe)); }
@media (max-width: 600px) { main > .hero:first-child { padding-top: calc(52px + var(--v12-sobe)); } }

/* sem suporte a blur: fundo sólido, sempre legível */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header { background: #000; }
}

/* ---------- botões em pílula (mesmas cores) ---------- */
.btn, .pedir, .varal-reset, .lp-zap, .pd-zap, .pd-espec, dialog .lista a, .cookies .btn {
  border-radius: 999px;
}
.pedir, .varal-reset, .lp-zap, .pd-zap, .pd-espec, dialog .lista a {
  transition: box-shadow .25s ease, filter .25s ease, border-color .25s ease;
}
.pedir:hover, .varal-reset:hover, .pd-espec:hover {
  border-color: var(--destaque);
  box-shadow: 0 0 16px -4px var(--brilho);
}
.lp-zap:hover, .pd-zap:hover, dialog .lista a:hover {
  box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.75);
  filter: brightness(1.05);
}
.btn-escuro:hover { box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.6), 0 0 18px -6px var(--brilho); }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  nav ul a, .menu-cel li a,
  .pedir, .varal-reset, .lp-zap, .pd-zap, .pd-espec, dialog .lista a { transition: none; }
}