/* ============================================================
   Navegador das TRÊS PORTAS — compartilhado pelas 3 páginas.
   Cada página define as variáveis --sw-* na sua própria paleta.
   ============================================================ */
.switcher{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 20px;
  background:var(--sw-bg,rgba(10,9,23,.82));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--sw-line,rgba(255,255,255,.1));
  font-family:'Jost',-apple-system,Segoe UI,sans-serif;
}
.switcher .mono{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;
  letter-spacing:.03em;color:var(--sw-brand,#e9dfc6);
  display:flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0;
}
.switcher .mono svg{width:23px;height:23px;flex-shrink:0}

.portas-nav{
  display:flex;gap:4px;margin:0 auto;
  background:var(--sw-pill,rgba(255,255,255,.05));
  border:1px solid var(--sw-line,rgba(255,255,255,.1));
  border-radius:44px;padding:4px;max-width:100%;
}
.porta-nav{
  --acc:#d9b871;--acc2:#f0d79a;--on:#241a10;
  display:flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:40px;
  color:var(--sw-text,#b3a9cf);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;transition:.4s cubic-bezier(.2,.8,.2,1);
  position:relative;white-space:nowrap;
}
.porta-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex-shrink:0;transition:.4s}
.porta-nav svg{width:16px;height:16px;transition:.4s;flex-shrink:0}
.porta-nav:hover{color:var(--sw-brand,#fff)}
.porta-nav:hover .dot{transform:scale(1.5)}
.porta-nav:hover svg{color:var(--acc)}
.porta-nav.active{
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:var(--on);font-weight:500;
  box-shadow:0 8px 22px -10px var(--acc);
}
.porta-nav.active .dot{background:var(--on)}
.porta-nav.active svg{color:var(--on)}

.p-spirit{--acc:#d9b871;--acc2:#f0d79a;--on:#241a10}
.p-move{--acc:#ff6a45;--acc2:#ffa061;--on:#3a1405}
.p-atelie{--acc:#c98b7a;--acc2:#e7bcab;--on:#3a201a}

.sw-cta{
  flex-shrink:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border-radius:40px;
  border:1px solid var(--sw-line,rgba(255,255,255,.2));
  color:var(--sw-brand,#e9dfc6);transition:.35s;
}
.sw-cta:hover{border-color:var(--sw-accent,#d9b871);color:var(--sw-accent,#d9b871);transform:translateY(-1px)}

/* rodapé: as três portas juntas */
.worlds{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.worlds a{display:flex;align-items:center;gap:9px;padding:11px 22px;border-radius:40px;
  border:1px solid var(--sw-line,rgba(255,255,255,.14));font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sw-text,#b3a9cf);transition:.4s}
.worlds a:hover{color:var(--sw-brand,#fff);transform:translateY(-3px);border-color:currentColor}
.worlds a .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.worlds a.w-spirit .dot{background:#d9b871}
.worlds a.w-move .dot{background:#ff6a45}
.worlds a.w-atelie .dot{background:#c98b7a}

@media(max-width:900px){
  .switcher{padding:9px 12px;gap:8px}
  .switcher .mono span{display:none}
  .sw-cta{display:none}
  .portas-nav{gap:2px;padding:3px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .portas-nav::-webkit-scrollbar{display:none}
  .porta-nav{padding:8px 13px;font-size:.66rem;letter-spacing:.05em;gap:7px}
}