/* ==========================================================
   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}

html[data-site="a"] #site-b,
html[data-site="b"] #site-a{display:none}
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}
}