/* Página de download do CUBO App.

   O visual é o do launcher (minecraft-launcher/src/ui/styles.css): Monocraft,
   contorno preto grosso, a pílula vermelha que titula as seções, o verde
   #009A00 do botão "Entrar na CUBO" e os painéis #1A1A1A. As cores abaixo são
   cópias de lá, com o mesmo nome quando a variável existe. Tema escuro só,
   como o launcher: a tela do tablet não tem modo claro. */

@font-face {
  font-family: 'Monocraft';
  src: url('fontes/Monocraft.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Monocraft';
  src: url('fontes/Monocraft-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --screen-bg: #0D0D0D;
  --card-bg: #1A1A1A;
  --card-border: #2A2A2A;
  --text-primary: #E0E0E0;
  --text-secondary: #9E9E9E;
  --verde: #009A00;
  --vermelho: #DC0000;
  --amarelo: #FFCC00;
  --azul: #00C8FF;
  --contorno: 4px solid #000;
  --raio: 24px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--screen-bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Monocraft', monospace;
  color: var(--text-primary);
  background: var(--screen-bg);
  line-height: 1.6;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
}

/* .botao e cia. definem display, que venceria o hidden do navegador. */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ─── Botões ─── mesmo desenho do .cubo-hero-join: verde, contorno preto,
   e afundam 2px no clique em vez de encolher. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--verde);
  border: var(--contorno);
  border-radius: 14px;
  color: #fff;
  font: 700 17px/1 'Monocraft', monospace;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.botao:active { transform: translateY(2px); }
.botao:focus-visible, .tour-item:focus-visible, .topo-links a:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}
.botao-escuro { background: var(--card-bg); }
.botao-pequeno { min-height: 42px; padding: 0 18px; font-size: 14px; border-width: 3px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .botao:hover { filter: brightness(1.18); }
}

/* ─── Topo ─── */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
  padding: 0 max(16px, calc((100vw - 1200px) / 2));
  background: rgba(13, 13, 13, 0.92);
  border-bottom: 3px solid #000;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  text-decoration: none;
}
.topo-links { display: flex; gap: 24px; margin-left: auto; }
.topo-links a {
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.topo-links a:hover { color: #fff; }

/* ─── Hero ─── o cenário do launcher atrás, escurecido para o texto ler. */
.hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 48px;
  min-height: calc(100dvh - 68px);
  padding: 48px max(16px, calc((100vw - 1200px) / 2));
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.94) 25%, rgba(13, 13, 13, 0.55)),
    linear-gradient(0deg, var(--screen-bg), transparent 30%),
    url('img/cenario.webp') center / cover;
}
.hero h1 {
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
.hero p {
  margin-top: 20px;
  max-width: 34ch;
  font-size: 17px;
  color: var(--text-primary);
}
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-tablet { justify-self: center; width: min(100%, 470px); }

/* ─── Tablet ─── a moldura do launcher (assets/tablet/base.png com os botões
   colados) por cima de um print da tela. As porcentagens são o buraco da tela
   no PNG de 2516 x 3021. */
.tablet { position: relative; aspect-ratio: 2516 / 3021; }
.tablet-moldura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tablet-tela {
  position: absolute;
  left: 6.995%;
  top: 5.859%;
  width: 77.19%;
  height: 67.99%;
  object-fit: cover;
  background: #000;
}

/* ─── Seções ─── a pílula vermelha do "Jogue Agora" pendurada no painel. */
.secao { padding: 72px max(16px, calc((100vw - 1200px) / 2)) 0; }
.aba {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 -22px 40px;
  padding: 8px 22px 10px;
  background: var(--vermelho);
  border: var(--contorno);
  border-radius: 14px;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.2;
}
.painel {
  background: var(--card-bg);
  border: var(--contorno);
  border-radius: var(--raio);
}

/* ─── Tour ─── */
.tour-corpo {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  align-items: center;
  gap: 56px;
  padding: 56px 48px 40px;
}
.tour-tablet .tablet-tela { transition: opacity 0.22s ease, filter 0.22s ease; }
.tour-tablet .tablet-tela.trocando { opacity: 0; filter: blur(4px); }
.tablet-hit {
  position: absolute;
  border: 0;
  border-radius: 22%;
  background: transparent;
  cursor: pointer;
}
.hit-azul, .hit-verde, .hit-amarelo { top: 81.4%; width: 13.5%; height: 11.2%; }
.hit-azul { left: 32.5%; }
.hit-verde { left: 46.7%; }
.hit-amarelo { left: 60.9%; }
.hit-config { left: 89.7%; top: 9.2%; width: 9.8%; height: 8.2%; border-radius: 50%; }
.tablet-hit:active { background: rgba(0, 0, 0, 0.18); }

.tour-lista { display: grid; gap: 12px; }
.tour-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 16px;
  align-items: baseline;
  padding: 16px 20px;
  background: transparent;
  border: 3px solid transparent;
  border-radius: 16px;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* O quadradinho repete a cor do botão do tablet que leva àquela tela. */
.tour-item::before {
  content: '';
  grid-row: span 2;
  width: 14px;
  height: 14px;
  border: 3px solid #000;
  border-radius: 4px;
  background: var(--cor);
  align-self: start;
  margin-top: 5px;
}
.tour-item strong { color: var(--text-primary); font-size: 18px; }
.tour-item span { font-size: 14px; line-height: 1.5; }
.tour-item[aria-selected="true"] {
  background: #222;
  border-color: #000;
  color: var(--text-primary);
}
.tour-item[aria-selected="true"] strong { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .tour-item:hover { background: #202020; }
}
.cor-verde { --cor: var(--verde); }
.cor-amarelo { --cor: var(--amarelo); }
.cor-azul { --cor: var(--azul); }
.cor-cinza { --cor: #4A4A4A; }

/* ─── Recursos ─── um destaque alto e quatro menores; cada um é um print. */
.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 44px;
}
.cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-bg);
  border: var(--contorno);
  border-radius: var(--raio);
}
.cartao img { flex: 1 1 auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-bottom: var(--contorno); }
.cartao-grande { grid-column: span 2; }
.cartao-grande img { aspect-ratio: 16 / 9; object-position: center; }
.cartao figcaption {
  padding: 18px 20px 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.cartao figcaption strong { display: block; margin-bottom: 4px; color: #fff; font-size: 17px; }

/* Entrada na rolagem: uma vez, de baixo, com o atraso da ordem do cartão. */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar { opacity: 0; transform: translateY(16px); }
  .js .revelar.visivel {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: calc(var(--ordem, 0) * 60ms);
  }
}

/* ─── Celular ─── o texto e o botão em cima, os prints em fila de celulares.
   A moldura é a mesma borda e o mesmo raio dos cartões; nada de arte nova. */
.celular-corpo { padding: 52px 48px 40px; }
.celular-texto {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 24px;
  align-items: center;
}
.celular-texto img { grid-row: span 2; width: 72px; }
.celular-texto h3 { color: #fff; font-size: 22px; line-height: 1.3; align-self: end; }
.celular-texto p { margin-top: 6px; color: var(--text-secondary); line-height: 1.5; align-self: start; }
.celular-texto .botao { grid-column: 1 / -1; justify-self: start; margin-top: 24px; }
.celular-texto small { grid-column: 1 / -1; margin-top: 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.celulares {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.celulares li { display: grid; gap: 12px; justify-items: center; }
.celulares img {
  width: 100%;
  aspect-ratio: 540 / 1030;
  object-fit: cover;
  object-position: top;
  border: var(--contorno);
  border-radius: var(--raio);
  background: #111;
}
.celulares span { color: var(--text-secondary); font-size: 14px; }

/* ─── Baixar ─── */
/* No main, e nao na ultima secao: assim o fim da pagina nao muda quando uma secao fica escondida. */
main { padding-bottom: 72px; }
.baixar-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 48px;
  border-color: #000;
  background: linear-gradient(160deg, #0F3D0F, var(--card-bg) 60%);
}
.baixar-texto h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.baixar-texto p { margin: 14px 0 28px; color: var(--text-secondary); }
.passos { list-style: none; display: grid; gap: 22px; align-content: center; counter-reset: passo; }
.passos li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  counter-increment: passo;
}
.passos li::before {
  content: counter(passo);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--amarelo);
  border: 3px solid #000;
  border-radius: 10px;
  color: #000;
  font-weight: 700;
}
.passos strong { color: #fff; }
.passos span { color: var(--text-secondary); font-size: 14px; }

/* ─── Rodapé ─── */
.rodape {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px max(16px, calc((100vw - 1200px) / 2));
  border-top: 3px solid #000;
  color: var(--text-secondary);
  font-size: 12px;
}
.rodape nav { display: flex; gap: 20px; margin-left: auto; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: #fff; }

/* ─── Entrada do hero ─── o texto chega primeiro, o tablet logo atrás. */
@media (prefers-reduced-motion: no-preference) {
  .hero-texto > *, .hero-tablet { animation: entrar 0.6s var(--ease-out) both; }
  .hero-texto > :nth-child(2) { animation-delay: 60ms; }
  .hero-texto > :nth-child(3) { animation-delay: 120ms; }
  .hero-tablet { animation-delay: 140ms; animation-duration: 0.8s; }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(20px); }
}

/* ─── Celular e telas estreitas ─── tudo numa coluna. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .hero-tablet { width: min(100%, 380px); }
  .tour-corpo { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 24px; }
  .tour-tablet { width: min(100%, 380px); justify-self: center; }
  .grade { grid-template-columns: 1fr 1fr; }
  .baixar-corpo { grid-template-columns: 1fr; padding: 40px 20px; }
}
@media (max-width: 640px) {
  .topo-links { display: none; }
  .topo { gap: 12px; }
  .marca { font-size: 15px; }
  .topo .botao { margin-left: auto; padding: 0 12px; font-size: 12px; }
  .grade { grid-template-columns: 1fr; }
  .cartao-grande { grid-column: auto; }
  .cartao-grande img { aspect-ratio: 4 / 3; }
  .celular-corpo { padding: 44px 20px 28px; }
  .celular-texto { grid-template-columns: 1fr; }
  .celular-texto img { grid-row: auto; width: 64px; margin-bottom: 16px; }
  /* Os cinco não cabem lado a lado: a fila rola, um celular e meio por vez. */
  .celulares {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .celulares li { scroll-snap-align: start; }
  .rodape { flex-wrap: wrap; }
  .aba { margin-left: 20px; }
}