/* ==========================================================
   0. GLOBAL
   [POR QUÊ] As duas versões convivem no mesmo arquivo. Para não
   brigarem, cada uma usa seu prefixo de classe: a- e b-. Nada de
   nome compartilhado, nada de disputa de especificidade.
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; max-width:100%; overflow-x:clip}
body{margin:0; overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
:root{--mono:'Space Mono',ui-monospace,monospace}

/* so a versao escolhida aparece; serve para quantas versoes existirem */
#site-a,#site-b,#site-d,#site-e{display:none}
html[data-site="a"] #site-a,
html[data-site="b"] #site-b,
html[data-site="d"] #site-d,
html[data-site="e"] #site-e{display:block}
html[data-site="a"] body{background:#FFF8F0}

/* --------- barra de troca de versão (só na demo) --------- */
.sw{
  position:fixed; left:50%; bottom:18px; translate:-50% 0; z-index:999;
  display:flex; align-items:center; gap:6px;
  background:#151018; border:2px solid #151018; border-radius:999px;
  padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.3);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.5px;
}
.sw b{color:#fff; padding:0 8px; font-weight:700}
.sw button{
  border:0; border-radius:999px; padding:8px 14px; cursor:pointer;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:transparent; color:rgba(255,255,255,.7);
}
.sw button[aria-pressed="true"]{background:#fff; color:#151018}
.sw i{width:1px; height:20px; background:rgba(255,255,255,.25); margin:0 2px}
@media (max-width:700px){.sw{font-size:10px; padding:5px} .sw button{padding:7px 10px; font-size:10px}}

/* No celular os botoes da barra de versao ficavam com ~30px de altura,
   abaixo do minimo confortavel de toque (44px). Esta barra some na entrega
   final, mas voce demonstra as versoes pelo celular. */
@media (max-width:700px){
  .sw{bottom:12px; padding:5px}
  .sw button{min-height:40px; padding:10px 16px; font-size:12px}
  .sw b{font-size:10px}
}

/* ==========================================================================
   BARRA COM MUITAS VERSOES
   Com seis opcoes a pilula nao cabe em 360px. Em vez de encolher a fonte
   ate ficar ilegivel, ela vira uma faixa que rola no eixo x, com o rotulo
   "Versao" escondido para sobrar espaco. A barra inteira ganha largura
   maxima presa a tela, entao nunca empurra a pagina.
   ========================================================================== */
.sw{max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap}
.sw::-webkit-scrollbar{display:none}
.sw button{white-space:nowrap; flex:0 0 auto}
@media (max-width:620px){
  .sw{gap:4px; padding:5px; font-size:10.5px}
  .sw b{display:none}
  .sw button{padding:7px 11px; font-size:10.5px}
}