/* WardPoint — a pagina de venda.
 *
 * A IDEIA E A NEVOA DE GUERRA. No jogo, a ward revela um circulo do mapa que
 * estava escuro; o produto revela o erro que a pessoa nao via. A pagina alterna
 * faixas de NEVOA (azul-tinta, escuras) e faixas de VISAO (claras), e as claras
 * sao onde o produto aparece fotografado. O unico momento animado e o topo: o
 * anel de visao abrindo sobre o screenshot real do overlay.
 *
 * UMA FAMILIA SO, Archivo, a mesma da logo. A personalidade vem do eixo de
 * largura: titulos largos (`wdth` 118, peso 800), corpo normal. Um segundo tipo
 * de letra so competiria com o logotipo.
 *
 * O que ficou de fora, de proposito: rotulo em caixa alta acima de titulo, seta
 * nos botoes, linhas de metadado separadas por ponto, cartoes iguais para tudo.
 * Os numeros 1-2-3 so aparecem onde o conteudo e de fato uma sequencia.
 *
 * Esta folha e so da pagina inicial. Termos, Privacidade e Conformidade seguem
 * em `style.css`.
 */

@property --r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22%;
}

:root {
  --nevoa: #0d1322;
  --nevoa-alta: #172038;
  --nevoa-borda: #2a3456;
  --visao: #eef1f8;
  --visao-alta: #ffffff;
  --ward: #6d5ef0;
  --ward-hover: #7d6ff6;
  --ward-claro: #8b7bff;
  --brilho: #7ce7ff;

  --tinta: #10131c;
  --tinta-media: #475066;
  --regua: #d3d8e6;
  --claro: #e8ebf4;
  --claro-medio: #a7afc6;

  --face: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --miolo: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--face);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--visao);
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` e o que faltava. As <img> levam width e height no HTML, para
   o navegador reservar o espaco antes de baixar; com `width: 100%` no CSS e sem
   isto, a altura ficava presa no atributo, e o print do jogo virava retrato. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brilho); outline-offset: 3px; border-radius: 4px; }

.faixa { padding-inline: var(--gutter); }
.miolo { max-width: var(--miolo); margin-inline: auto; }

/* O titulo largo. E o elemento tipografico da pagina: mesma familia da logo,
   aberta no eixo de largura, apertada no espaco entre letras. */
.titulo {
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
h1.titulo { font-size: clamp(2.4rem, 4.8vw, 4.1rem); }
h2.titulo { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.3rem; line-height: 1.25; margin: 0; font-weight: 700; }

/* ---------------------------------------------------------------- botoes */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.45rem; border-radius: 10px;
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 0;
}
.botao--principal {
  background: var(--ward); color: #fff;
  box-shadow: inset 0 0 0 1px var(--ward-claro), 0 10px 30px -10px rgba(109, 94, 240, .75);
}
.botao--principal:hover { background: var(--ward-hover); }
.botao--fantasma { color: var(--claro); box-shadow: inset 0 0 0 1.5px var(--nevoa-borda); }
.botao--fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--ward-claro); }
.botao--claro { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--regua); background: var(--visao-alta); }
.botao--claro:hover { box-shadow: inset 0 0 0 1.5px var(--ward); }
.botao small { font-weight: 500; opacity: .85; }

/* ------------------------------------------------------------------ topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(13, 19, 34, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nevoa-borda);
}
.topo__miolo { display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; }
.marca {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em;
}
.marca svg { width: 30px; height: 30px; flex: none; }
.marca b { font-weight: 800; }
.marca span { color: var(--ward-claro); }
.topo nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.topo nav a:not(.botao) { color: var(--claro-medio); text-decoration: none; font-size: .95rem; }
.topo nav a:not(.botao):hover { color: #fff; }
.topo .botao { padding: .6rem 1.05rem; font-size: .95rem; }
@media (max-width: 46rem) {
  .topo nav a:not(.botao) { display: none; }
}

/* ----------------------------------------------------------------- heroi */
.heroi {
  background:
    radial-gradient(60rem 30rem at 85% 30%, rgba(109, 94, 240, .22), transparent 70%),
    var(--nevoa);
  color: var(--claro);
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}
.heroi .miolo {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  grid-template-columns: 1fr;
}
/* Metade e metade. Com 5/7 a coluna de texto ficava estreita demais para a
   fonte larga, e "enxergando" invadia a imagem. */
@media (min-width: 60rem) {
  .heroi .miolo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.heroi h1 { color: #fff; }
.heroi__sub { font-size: 1.2rem; color: var(--claro-medio); max-width: 34rem; margin: 1.25rem 0 0; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.heroi__nota { margin: 1rem 0 0; font-size: .92rem; color: var(--claro-medio); }

/* A JANELA DO JOGO, com a nevoa por cima e o anel de visao revelando o erro.
   A posicao do anel (27% x 15%) e o centro do card de erro no screenshot
   recortado; o raio cobre o card e um pouco do jogo em volta. A mascara usa a
   mesma variavel que o tamanho do anel, para os dois abrirem juntos. */
.janela {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px var(--nevoa-borda), 0 30px 80px -30px rgba(0, 0, 0, .8);
  background: #000;
}
.janela img { width: 100%; height: 100%; object-fit: cover; }
.janela__nevoa {
  position: absolute; inset: 0; background: rgba(9, 13, 25, .74);
  -webkit-mask-image: radial-gradient(circle at 27% 15%, transparent var(--r), #000 calc(var(--r) + 1.5%));
  mask-image: radial-gradient(circle at 27% 15%, transparent var(--r), #000 calc(var(--r) + 1.5%));
  animation: revelar 1.5s cubic-bezier(.2, .75, .2, 1) .4s both;
}
.janela__anel {
  position: absolute; left: 27%; top: 15%;
  width: 38.2%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  border: 2px solid rgba(124, 231, 255, .85);
  box-shadow: 0 0 26px 4px rgba(124, 231, 255, .35), inset 0 0 26px rgba(124, 231, 255, .22);
  animation: abrir 1.5s cubic-bezier(.2, .75, .2, 1) .4s both;
  pointer-events: none;
}
@keyframes revelar { from { --r: 0%; } to { --r: 22%; } }
@keyframes abrir { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .janela__nevoa, .janela__anel { animation: none; }
}
.janela__legenda { margin: .75rem 0 0; font-size: .88rem; color: var(--claro-medio); }

/* ----------------------------------------------------------------- prova */
.prova { padding-block: clamp(3rem, 8vw, 5.5rem); }
.prova blockquote { margin: 0; max-width: 50rem; position: relative; padding-left: clamp(0rem, 4vw, 3.25rem); }
.prova blockquote::before {
  content: "\201C"; position: absolute; left: -.2rem; top: -1.6rem;
  font-size: 6rem; line-height: 1; font-weight: 800; color: var(--ward);
}
@media (max-width: 40rem) { .prova blockquote::before { position: static; display: block; margin-bottom: -1.5rem; } }
.prova p {
  margin: 0; font-size: clamp(1.4rem, 2.7vw, 2.05rem); line-height: 1.3; font-weight: 500;
  letter-spacing: -0.01em; text-wrap: pretty;
}
.prova footer { margin-top: 1.5rem; font-size: 1rem; color: var(--tinta-media); }
.prova footer b { color: var(--tinta); display: block; font-size: 1.1rem; }

/* ---------------------------------------------------------------- passos */
.passos { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--visao-alta); }
.passos ol {
  list-style: none; padding: 0; margin: 2.25rem 0 0;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .passos ol { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
/* Numero de verdade: jogar, revisar, corrigir e uma sequencia. */
.passos li { counter-increment: passo; }
.passos li::before {
  content: counter(passo);
  display: block; font-variation-settings: "wdth" 125; font-weight: 900;
  font-size: 3.2rem; line-height: 1; color: var(--ward); margin-bottom: .6rem;
}
.passos p { margin: .5rem 0 0; color: var(--tinta-media); }

/* -------------------------------------------------------------- recursos */
.recursos { padding-block: clamp(3rem, 7vw, 5rem); }
.recurso {
  display: grid; gap: clamp(1.25rem, 4vw, 3rem); align-items: center;
  grid-template-columns: 1fr; padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 56rem) {
  .recurso { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .recurso--invertido .recurso__foto { order: 2; }
  /* A coluna larga acompanha a imagem. Sem isto, nas linhas invertidas a
     imagem caia na coluna estreita e o texto do print ficava ilegivel. */
  .recurso--invertido { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* O produto e escuro; a pagina, clara. A moldura escura e o que faz o
   screenshot parecer o aparelho, e nao uma imagem colada. */
.recurso__foto {
  background: var(--nevoa); border-radius: 14px; padding: clamp(.5rem, 1.6vw, 1rem);
  box-shadow: 0 24px 60px -30px rgba(16, 19, 28, .55);
}
.recurso__foto img { border-radius: 8px; width: 100%; }
.recurso__foto--jogo { padding: 0; overflow: hidden; }
.recurso__foto--jogo img { border-radius: 0; }
.recurso p { margin: .75rem 0 0; color: var(--tinta-media); max-width: 30rem; }
.recursos__fim { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* O QUE SO A ASSINATURA TEM, numa faixa escura propria dentro da clara. Tudo
   fora dela e gratuito: a fronteira tem de ser vista, nao deduzida do texto. */
.metodo {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  background: var(--nevoa); color: var(--claro);
  border-radius: 20px; padding: clamp(1.25rem, 4vw, 3rem);
  box-shadow: inset 0 0 0 1.5px var(--ward), 0 30px 70px -40px rgba(109, 94, 240, .6);
}
.metodo__topo { max-width: 44rem; }
.metodo__topo h2 { color: #fff; }
.metodo__topo p { margin: 1rem 0 0; color: var(--claro-medio); font-size: 1.1rem; }
.metodo h3, .metodo .recurso b { color: #fff; }
.metodo .recurso p { color: var(--claro-medio); }
.metodo .recurso__foto { background: #090e1a; box-shadow: inset 0 0 0 1px var(--nevoa-borda); }
.metodo .recurso:last-child { padding-bottom: 0; }

/* AS MARCACOES NO JOGO, em grade. Sao quatro prints da mesma coisa — a pessoa
   anotando por cima do replay —, e lado a lado eles mostram o que um so nao
   mostra: erro, acerto, anotacao e desenho sao o mesmo gesto. */
.galeria {
  display: grid; gap: clamp(.9rem, 2.4vw, 1.4rem); grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 44rem) { .galeria { grid-template-columns: 1fr 1fr; } }
.galeria__texto { grid-column: 1 / -1; max-width: 40rem; }
.galeria__texto p { margin: .75rem 0 0; color: var(--tinta-media); }
.galeria figure {
  margin: 0; background: var(--nevoa); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(16, 19, 28, .55);
}
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.galeria figcaption { padding: .7rem .95rem; color: var(--claro-medio); font-size: .9rem; }

/* ---------------------------------------------------------------- planos */
.planos { padding-block: clamp(3rem, 7vw, 5rem); background: var(--visao-alta); }
.planos__grade {
  display: grid; gap: 1.25rem; margin-top: 2.25rem;
  grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 52rem) { .planos__grade { grid-template-columns: 1fr 1fr; max-width: 56rem; } }
.plano {
  border-radius: 16px; padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1.5px var(--regua);
}
.plano--destaque {
  background: var(--nevoa); color: var(--claro);
  box-shadow: inset 0 0 0 1.5px var(--ward), 0 30px 70px -30px rgba(109, 94, 240, .6);
}
.plano h3 { font-size: 1.15rem; }
.plano__para { margin: .3rem 0 0; color: var(--tinta-media); font-size: .95rem; }
.plano--destaque .plano__para { color: var(--claro-medio); }
.plano__preco {
  margin: 1.1rem 0 0; font-variation-settings: "wdth" 120; font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.1rem); letter-spacing: -0.03em; line-height: 1;
}
.plano--destaque .plano__preco { color: #fff; }
.plano__preco small { font-size: 1rem; font-weight: 500; letter-spacing: 0; font-variation-settings: "wdth" 100; color: var(--claro-medio); }
.plano ul { list-style: none; padding: 0; margin: 1.4rem 0 1.75rem; flex: 1; }
.plano__inclui { margin: 1.4rem 0 0; font-weight: 700; }
.plano--destaque .plano__inclui, .plano--destaque li b { color: #fff; }
.plano__inclui + ul { margin-top: .5rem; }
.plano li { padding: .4rem 0 .4rem 1.65rem; position: relative; }
.plano li::before {
  content: ""; position: absolute; left: 0; top: .78rem;
  width: .85rem; height: .45rem; border-left: 2.5px solid var(--ward); border-bottom: 2.5px solid var(--ward);
  rotate: -45deg;
}
.plano--destaque li::before { border-color: var(--brilho); }
.plano .botao { width: 100%; }
.plano__nota { margin: .8rem 0 0; font-size: .85rem; color: var(--claro-medio); text-align: center; }

/* Um plano so. O argumento da compra a esquerda, o cartao a direita: com o
   cartao sozinho, metade da secao era vazio. */
.planos__layout { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .planos__layout { grid-template-columns: 1fr 27rem; gap: 4rem; } }
.planos__texto { color: var(--tinta-media); font-size: 1.1rem; max-width: 30rem; margin: 1rem 0 0; }
.planos__grade--um { margin-top: 0; }
@media (min-width: 52rem) { .planos__grade--um { grid-template-columns: 1fr; max-width: none; } }

/* ---------------------------------------------------------------- duvidas */
.duvidas { padding-block: clamp(3rem, 7vw, 5rem); }
.duvidas__lista { margin-top: 1.75rem; max-width: 48rem; border-top: 1.5px solid var(--regua); }
.duvidas details { border-bottom: 1.5px solid var(--regua); }
.duvidas summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 700; font-size: 1.1rem;
}
.duvidas summary::-webkit-details-marker { display: none; }
/* O "+" vira "−" ao abrir: o unico sinal de estado, e ele responde ao clique. */
.duvidas summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; translate: 0 -50%;
  font-size: 1.6rem; font-weight: 500; color: var(--ward);
}
.duvidas details[open] summary::after { content: "\2212"; }
.duvidas details > div { padding: 0 0 1.25rem; color: var(--tinta-media); max-width: 42rem; }
.duvidas details p { margin: 0 0 .6rem; }
.duvidas details ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.duvidas details li { margin-bottom: .45rem; }
.duvidas details li b { color: var(--tinta); }

/* ------------------------------------------------------------ chamada final */
.final {
  background:
    radial-gradient(50rem 24rem at 15% 0%, rgba(109, 94, 240, .2), transparent 70%),
    var(--nevoa);
  color: var(--claro); padding-block: clamp(3.5rem, 8vw, 6rem);
}
.final h2 { color: #fff; max-width: 40rem; }
.final .acoes { margin-top: 1.75rem; }

.manifesto {
  margin: 3rem 0 0; max-width: 46rem; font-size: .92rem;
  border-top: 1px solid var(--nevoa-borda);
}
.manifesto > div {
  display: grid; grid-template-columns: 1fr; gap: .15rem 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--nevoa-borda);
}
@media (min-width: 40rem) { .manifesto > div { grid-template-columns: 7.5rem 1fr; } }
.manifesto dt { color: var(--claro-medio); font-size: .85rem; }
.manifesto dd { margin: 0; min-width: 0; color: var(--claro); }
.manifesto code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; color: var(--brilho); }
.manifesto__hash { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .3rem; }
.manifesto__hash button {
  font: inherit; font-size: .8rem; padding: .25rem .6rem; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--claro); border: 1px solid var(--nevoa-borda);
}
.manifesto__hash button:hover { border-color: var(--ward-claro); }
/* `.manifesto > .manifesto__aviso`, e nao so `.manifesto__aviso`: o aviso e um
   `div` filho da lista, e `.manifesto > div` (mais especifico) o transformava na
   grade de duas colunas — o texto caia espremido na coluna do rotulo. Foi o
   mesmo defeito da pagina antiga, repetido aqui. */
.manifesto > .manifesto__aviso { display: block; color: #ffb38a; font-size: .85rem; line-height: 1.6; border: 0; }
.manifesto > .manifesto__aviso[hidden] { display: none; }
.manifesto__aviso a { color: inherit; text-decoration: underline; }

/* A versao gratuita, dentro do FAQ. Discreta de proposito: ela existe (a
   politica da Riot exige, e os Termos prometem), mas a pagina vende. */
.duvidas .gratis a { color: var(--ward); font-weight: 700; }
.duvidas .gratis__hash { font-size: .85rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.duvidas .gratis__hash code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.duvidas .gratis__hash button {
  font: inherit; font-size: .78rem; padding: .2rem .55rem; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--tinta); border: 1px solid var(--regua);
}
.duvidas .gratis__aviso { font-size: .85rem; color: #b4532a; }
.final__nota { margin: 1.1rem 0 0; color: var(--claro-medio); font-size: .92rem; }

/* ------------------------------------------------------------------ rodape */
.rodape {
  background: var(--nevoa); color: var(--claro-medio); font-size: .85rem;
  padding-block: 2rem 2.5rem; border-top: 1px solid var(--nevoa-borda);
}
.rodape p { margin: 0 0 .75rem; max-width: 52rem; }
.rodape a { color: var(--claro); }