/* Site do Vi4K Player (vi4k.online). Não é o app: aqui pode CSS moderno; o app segue o piso (web/app.css). */
* { box-sizing: border-box; }
html { background: #0b1526; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #e6edf5; background: #0b1526; line-height: 1.55; }
a { color: #7fb3f0; text-decoration: none; }
a:hover { text-decoration: underline; }
.faixa { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
header { background: #0e1b31; }
header .faixa { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; color: #ffffff; font-weight: 700; font-size: 20px; }
.marca img { width: 40px; height: 40px; border-radius: 8px; }
nav a { color: #c3cfdd; margin-left: 22px; font-size: 15px; }
nav a:hover { color: #ffffff; text-decoration: none; }
.capa { padding: 72px 0 56px; text-align: center; }
.capa h1 { font-size: 44px; line-height: 1.15; margin: 0 0 18px; color: #ffffff; }
.capa p { font-size: 19px; color: #c3cfdd; max-width: 720px; margin: 0 auto 26px; }
.botao { display: inline-block; background: #2f6fb5; color: #ffffff; padding: 14px 28px; border-radius: 8px; font-weight: 600; margin: 6px; }
.botao:hover { background: #3b82d1; text-decoration: none; }
.botao.secundario { background: #132640; }
.aviso { background: #132640; border-radius: 10px; padding: 18px 22px; color: #c3cfdd; max-width: 820px; margin: 0 auto; font-size: 15px; }
.aviso b { color: #ffffff; }
section { padding: 56px 0; }
section h2 { font-size: 30px; margin: 0 0 28px; color: #ffffff; text-align: center; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cartao { background: #132640; border-radius: 12px; padding: 24px; }
.cartao h3 { margin: 0 0 8px; font-size: 19px; color: #ffffff; }
.cartao p { margin: 0; color: #c3cfdd; font-size: 15px; }
.cartao .n { display: inline-block; background: #2f6fb5; color: #ffffff; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 17px; font-weight: 700; margin-bottom: 12px; }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.passos ol { margin: 10px 0 0; padding-left: 20px; color: #c3cfdd; font-size: 15px; }
.passos li { margin: 6px 0; }
.plataformas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.plataformas span { background: #132640; border-radius: 20px; padding: 10px 18px; color: #e6edf5; font-size: 15px; }
.plataformas span.breve { color: #8fa3bd; }
details { background: #132640; border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; color: #ffffff; font-size: 16px; }
details p { margin: 10px 0 0; color: #c3cfdd; font-size: 15px; }
footer { background: #0e1b31; padding: 28px 0; color: #8fa3bd; font-size: 14px; }
footer .faixa { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
footer a { color: #c3cfdd; margin-right: 18px; }
.texto { max-width: 820px; margin: 0 auto; padding: 48px 20px 64px; }
.texto h1 { font-size: 36px; color: #ffffff; margin: 0 0 6px; }
.texto .data { color: #8fa3bd; margin: 0 0 28px; font-size: 14px; }
.texto h2 { font-size: 22px; color: #ffffff; margin: 32px 0 10px; text-align: left; }
.texto p, .texto li { color: #c3cfdd; font-size: 16px; }
.texto ul { padding-left: 22px; }
.texto table { width: 100%; border-collapse: collapse; font-size: 15px; }
.texto th, .texto td { text-align: left; padding: 10px 12px; color: #c3cfdd; }
.texto th { color: #ffffff; background: #132640; }
.texto tr:nth-child(even) td { background: #0e1b31; }
@media (max-width: 720px) {
  header .faixa { height: auto; flex-direction: column; padding: 14px 20px; gap: 10px; }
  nav a { margin: 0 10px; }
  .capa { padding: 48px 0 40px; }
  .capa h1 { font-size: 32px; }
  .capa p { font-size: 17px; }
  section h2 { font-size: 25px; }
}