/* FestaKe - página inicial. Visual "noite de festa": violeta escuro com brilho rosa/laranja.
   Navegadores antigos de TV ignoram gradientes e ficam com as cores sólidas (cada regra tem fallback). */
html, body { margin: 0; padding: 0; }
body {
  background-color: #140a26;
  background-image:
    radial-gradient(ellipse at 12% -5%, rgba(255, 61, 154, 0.35), rgba(255, 61, 154, 0) 45%),
    radial-gradient(ellipse at 95% 5%, rgba(61, 200, 255, 0.18), rgba(61, 200, 255, 0) 40%),
    radial-gradient(ellipse at 50% 110%, rgba(255, 138, 61, 0.18), rgba(255, 138, 61, 0) 50%);
  background-attachment: fixed;
  color: #f7f3ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  padding: 0 16px 32px;
}
b { color: #fff; }
h1, h2, h3, .logo, .botao, .num { font-family: "Fredoka", Arial, Helvetica, sans-serif; }
.escondido { display: none; }

/* ---------- logo ---------- */
.logo {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}
.logo .mic { width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 0.12em; color: #ff3d9a; }
.ke { color: #ff3d9a; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ke, .grad {
    background: linear-gradient(90deg, #ff3d9a, #ff8a3d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- hero ---------- */
.hero { text-align: center; padding: 48px 0 8px; }
.hero .logo { font-size: 72px; line-height: 1; text-shadow: 0 0 40px rgba(255, 61, 154, 0.45); }
.hero h1 { font-size: 36px; font-weight: 600; line-height: 1.2; max-width: 760px; margin: 22px auto 18px; color: #fff; }
.hero h1 .grad { color: #ff8a3d; }
.selos { list-style: none; margin: 0; padding: 0; }
.selos li {
  display: inline-block;
  margin: 4px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 63, 0.4);
  background: rgba(255, 210, 63, 0.08);
  color: #ffd23f;
  font-weight: bold;
  font-size: 15px;
}

/* ---------- cartões de ação ---------- */
.acoes { max-width: 920px; margin: 36px auto 0; text-align: center; font-size: 0; }
.cartao {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  min-width: 270px;
  margin: 10px 1.5%;
  padding: 28px 24px 24px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #1e1238;
  background: rgba(37, 22, 68, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-size: 18px;
  text-align: center;
}
.cartao-icone {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: #ff3d9a;
  background: linear-gradient(135deg, #ff3d9a, #ff8a3d);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 61, 154, 0.4);
}
.cartao-icone svg { width: 30px; height: 30px; margin-top: 13px; }
.cartao h2 { margin: 0 0 4px; font-size: 30px; font-weight: 700; color: #fff; }
.cartao p { margin: 0 0 18px; color: #c9c0ec; }

.botao {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  padding: 14px 34px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #2c1a52;
  color: #fff;
  cursor: pointer;
}
.botao.principal {
  border-color: #ff3d9a;
  background: #ff3d9a;
  background: linear-gradient(90deg, #ff3d9a, #ff8a3d);
  box-shadow: 0 10px 30px rgba(255, 61, 154, 0.45);
}
.botao:hover { filter: brightness(1.08); }
.botao:focus { outline: 4px solid #ffd23f; outline-offset: 3px; }

#codigo {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 14px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: "Fredoka", Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 10px;
  text-indent: 10px;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #0f0820;
  color: #fff;
}
#codigo:focus { border-color: #ffd23f; outline: none; }
#codigo::placeholder { color: #5b4f86; letter-spacing: 6px; }
.erro { color: #ff8a8a !important; min-height: 1em; margin: 12px 0 0 !important; font-size: 16px; }

/* ---------- como funciona ---------- */
.titulo-secao { text-align: center; font-size: 30px; font-weight: 700; margin: 0 0 18px; }
.passos { max-width: 920px; margin: 56px auto 0; }
.passos ol { list-style: none; margin: 0; padding: 0; text-align: center; font-size: 0; }
.passos li {
  display: inline-block;
  vertical-align: top;
  width: 31%;
  min-width: 230px;
  margin: 8px 1%;
  font-size: 17px;
  color: #c9c0ec;
}
.passos li b { display: block; font-family: "Fredoka", Arial, sans-serif; font-size: 22px; font-weight: 600; margin: 8px 0 2px; }
.num {
  display: inline-block;
  width: 46px;
  height: 46px;
  line-height: 46px;
  border-radius: 50%;
  border: 2px solid #ff3d9a;
  color: #ff3d9a;
  font-size: 22px;
  font-weight: 700;
}

/* ---------- dicas ---------- */
.dicas { max-width: 920px; margin: 48px auto 0; font-size: 0; }
.dica {
  display: inline-block;
  vertical-align: top;
  width: 47%;
  min-width: 270px;
  margin: 8px 1.5%;
  padding: 22px 24px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
}
.dica h3 { color: #ffd23f; margin: 0 0 10px; font-size: 22px; font-weight: 600; }
.dica ul { margin: 0; padding-left: 20px; color: #d8d0f5; }
.dica li { margin-bottom: 8px; }

.rodape { text-align: center; color: #7d73a8; font-size: 14px; margin-top: 40px; }

.aviso-voltar {
  margin: 16px auto 0;
  max-width: 640px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #ffd23f;
  color: #140a26;
  text-align: center;
  font-size: 18px;
}
.aviso-voltar b { color: #140a26; }
.aviso-voltar a { color: #140a26; font-weight: bold; margin-left: 10px; }

@media (max-width: 640px) {
  .hero { padding-top: 32px; }
  .hero .logo { font-size: 54px; }
  .hero h1 { font-size: 26px; }
  .cartao, .dica { width: 100%; margin: 8px 0; }
  .passos li { width: 100%; margin: 10px 0; }
}