/* ============================================================
   WIKIROTAS — base.css
   Regras compartilhadas por TODAS as páginas do site.
   Cada página define suas próprias cores/fontes de tema; aqui só
   fica o que é estrutural e idêntico em todo lugar (reset e o
   componente de topbar). Páginas customizam o topbar via as
   variáveis --tb-* definidas no próprio :root de cada uma.
   ============================================================ */

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}

/* ---------- ESCALA DE ESPAÇAMENTO (grid de 8pt) ----------
   Base 8px com sub-passo de 4px para ajustes finos. Use estes
   tokens em vez de valores soltos (22px, 26px, 34px...) sempre
   que for definir padding/margin/gap. */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
}

/* ---------- TOPBAR fixo ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-6);
  background:var(--tb-bg, rgba(10,10,10,.6));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--tb-border, rgba(255,255,255,.12));
}
.topbar-logo{
  text-decoration:none;color:var(--tb-fg, #fff);
  letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;font-weight:700;
}
.topbar-wa{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:44px;min-width:44px;justify-content:center;
  padding:var(--space-2) var(--space-4);border-radius:30px;
  background:var(--tb-accent, #F5D400);color:var(--tb-accent-fg, #111);
  text-decoration:none;font-weight:700;font-size:.85rem;
  transition:transform .15s;
}
.topbar-wa:hover{transform:translateY(-2px)}
.topbar-wa svg{width:18px;height:18px;fill:var(--tb-accent-fg, #111);flex:0 0 auto}

/* ---------- Grupo de ações do topbar (idioma + WhatsApp) ---------- */
.topbar-actions{display:flex;align-items:center;gap:var(--space-3)}

.lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:var(--space-2) var(--space-4);
  border-radius:30px;border:1px solid var(--tb-border, rgba(255,255,255,.16));
  background:transparent;color:var(--tb-fg, #fff);
  font-family:inherit;font-weight:700;font-size:.8rem;letter-spacing:.05em;
  cursor:pointer;transition:transform .15s,background .15s,color .15s,border-color .15s;
}
.lang-toggle:hover{
  background:var(--tb-accent, #F5D400);color:var(--tb-accent-fg, #111);
  border-color:var(--tb-accent, #F5D400);transform:translateY(-2px);
}

@media(max-width:520px){
  .topbar-wa span{display:none}
  .topbar-wa{padding:var(--space-2)}
  .lang-toggle{padding:var(--space-2);min-width:40px}
}