/* =========================
   RESET
========================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* =========================
   BODY PADRÃO
========================= */
.page {
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* =========================
   CONTAINER DE SCROLL
========================= */
.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   CADA TELA
========================= */
.screen {
  height: 100vh;
  max-width: 430px;
  margin: 0 auto;

  background-color: #000d2e;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;

  position: relative;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* =========================
   MENU SAIBA MAIS
========================= */
.menu {
  position: relative;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;

  display: grid;
  grid-template-columns: 1fr 1fr;

  column-gap: 50px;
  row-gap: 28px;
}

.menu a {
  height: 46px;
  border-radius: 999px;

  background: #ffffff;
  color: #0a3b6f;

  font-size: 13px;
  font-weight: 600;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.menu a:active {
  transform: scale(0.96);
}

.menu a.buy {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(46, 204, 113, 0.45);
}

/* =========================
   INDEX
========================= */
.page.index {
  height: auto;
  overflow-y: auto;
  background: #000;
}

.index-wrapper {
  position: relative;
  max-width: 430px;
  margin: 0 auto;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;

  aspect-ratio: 9 / 48;
}

.index .menu.saiba-mais {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
}

#saiba-mais-anchor {
  position: absolute;
  top: 70%;
  width: 1px;
  height: 1px;
}

/* =========================
   TOPO SOBRE A ARTE
   (estrutura base p/ JS centralizar Manual)
========================= */

.top-art-nav {
  position: absolute;
  top: 2.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 20;
}

/* LINKS DO TOPO */

.top-art-nav .nav-slot {
  position: absolute;
  top: 0;
}

.top-art-nav .nav-slot.left {
  left: 35%; /* começa após a área da logo */
}

.top-art-nav .nav-slot.right {
  right: 4%;
}

.top-art-nav .nav-slot.center {
  left: 50%;
  transform: translateX(-50%);
}

.top-art-nav a {
  font-size: 13px;
  font-weight: 600;
  color: #0a3b6f;
  text-decoration: none;
  white-space: nowrap;
}

/* =========================
   STATUS DE CONEXÃO
========================= */

.user-status-art {
  position: absolute;
  top: 1.1%;
  right: 6%;
  z-index: 25;
  pointer-events: none;
}

.user-status-art .status-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.status-wrapper.logged {
  color: #2ecc71;
}

.status-wrapper.not-logged {
  color: #ff8c00;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-dot.green {
  background: #1f9d55;
}

.status-dot.red {
  background: #b33939;
}