/* Vice City World: estilo compartilhado do site */
:root {
  --fundo: #0e0a1c;
  --fundo-2: #141026;
  --superficie: #19132f;
  --linha: #2b2347;
  --texto: #f3effa;
  --suave: #aea6c4;
  --fraco: #7f7899;
  --destaque: #ff4d8d;
  --destaque-escuro: #e23a77;
  --laranja: #ffa24c;
  --largura: 1160px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.65 Inter, system-ui, -apple-system, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.faixa { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
@media (max-width: 480px) { .faixa { padding: 0 16px; } }

/* cabecalho */
.cabecalho { position: sticky; top: 0; z-index: 20; background: rgba(14, 10, 28, .92); backdrop-filter: saturate(140%) blur(8px);
             border-bottom: 1px solid var(--linha); }
.cabecalho .faixa { display: flex; align-items: center; gap: 28px; height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.02rem/1 Archivo, Inter, sans-serif;
         letter-spacing: -.01em; white-space: nowrap; }
.marca img { width: 34px; height: 34px; border-radius: 8px; }
.menu { display: flex; gap: 24px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--suave); font-size: .94rem; font-weight: 500; }
.menu a:hover { color: var(--texto); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 8px;
         font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao.principal { background: var(--destaque); color: #fff; }
.botao.principal:hover { background: var(--destaque-escuro); }
.botao.secundario { border-color: var(--linha); color: var(--texto); background: transparent; }
.botao.secundario:hover { border-color: var(--suave); }
.cabecalho .botao { padding: 8px 14px; font-size: .88rem; }
@media (max-width: 760px) { .menu { display: none; } .cabecalho .botao { margin-left: auto; } }

/* tipografia */
.rotulo { font: 700 .75rem/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja); margin: 0 0 14px; }
h1, h2, h3 { font-family: Archivo, Inter, sans-serif; letter-spacing: -.02em; margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05; }
h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.1; }
.secao { padding: 88px 0 0; }
.secao-topo { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.secao-topo a { color: var(--suave); text-decoration: none; font-weight: 500; white-space: nowrap; }
.secao-topo a:hover { color: var(--texto); }

/* paginas de texto (privacidade, termos) */
.texto { max-width: 720px; padding: 56px 20px 32px; margin: 0 auto; }
.texto h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin-bottom: 6px; }
.texto .data { color: var(--fraco); margin: 0 0 28px; }
.texto h2 { font-size: 1.2rem; margin: 36px 0 8px; letter-spacing: -.01em; }
.texto p, .texto li { color: var(--suave); }
.texto a { color: var(--destaque); }
.texto .quadro { border-left: 3px solid var(--destaque); background: var(--fundo-2); padding: 4px 18px; margin: 16px 0; }

/* rodape */
.rodape { margin-top: 104px; border-top: 1px solid var(--linha); background: var(--fundo-2); padding: 48px 0 40px; font-size: .92rem; }
.rodape .grade-rodape { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .rodape .grade-rodape { grid-template-columns: 1fr 1fr; } .rodape .sobre-rodape { grid-column: 1 / -1; } }
.rodape h3 { font: 700 .78rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fraco); margin: 0 0 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape a { color: var(--suave); text-decoration: none; }
.rodape a:hover { color: var(--texto); }
.rodape .sobre-rodape p { color: var(--fraco); max-width: 46ch; margin: 12px 0 0; }
.rodape .legal { border-top: 1px solid var(--linha); margin-top: 36px; padding-top: 20px; color: var(--fraco); font-size: .82rem; }