/* =====================================================================
   Brasil Play + NikiBrasil — folha de estilos própria
   Usa as cores, fontes e botões de styles.css (mesma linguagem de
   sinalização de estrada: placas verdes com filete branco, amarelo
   para o que pede ação).
   ===================================================================== */

.bp-travado { overflow: hidden; }

.bp-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .35rem .8rem .2rem;
  border-radius: 8px;
  background: var(--amarelo);
  color: var(--tinta);
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bp-header-niki .icon { color: var(--tinta); }

/* ---------- Placa do Desafio do Dia (topo) ---------- */
.bp-placa-dia {
  padding: 7px;
  border-radius: 20px;
  background: var(--verde);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.bp-placa-dia-borda {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 3px solid #fff;
  border-radius: 14px;
  color: #fff;
}
.bp-placa-dia-topo {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid rgba(255, 255, 255, .85);
  font-weight: 800;
  font-size: .95rem;
}
.bp-placa-dia-titulo {
  margin-top: 1.1rem;
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.45rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.bp-placa-dia-texto { margin-top: .7rem; color: rgba(255, 255, 255, .86); }
.bp-placa-dia-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1rem;
  margin-top: 1.4rem;
}
.bp-sequencia {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem .25rem;
  border-radius: 999px;
  background: rgba(255, 199, 44, .16);
  color: var(--amarelo-claro);
  font-weight: 800;
  font-size: .95rem;
}

/* ---------- Desafio recebido (topo da página) ---------- */
.bp-desafio-recebido {
  position: relative;
  background: var(--amarelo);
  color: var(--tinta);
  border-bottom: 4px solid var(--tinta);
}
.bp-desafio-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem 1.4rem;
  padding: 1.3rem 0;
}
.bp-desafio-selo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--amarelo);
}
.bp-desafio-selo .icon { width: 30px; height: 30px; }
.bp-desafio-texto { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.3; font-weight: 600; }
.bp-desafio-texto strong { font-weight: 900; }
.bp-desafio-pontos {
  display: inline-block;
  padding: 0 .35rem;
  border-radius: 6px;
  background: var(--tinta);
  color: var(--amarelo);
  font-family: "Saira Condensed", "Overpass", sans-serif;
  font-size: 1.25em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.bp-desafio-btn { background: var(--tinta); color: #fff; }
.bp-desafio-btn:hover { background: var(--asfalto-2); color: #fff; }
.bp-desafio-btn:disabled { opacity: .55; cursor: progress; }
.bp-desafio-recebido.carregando .bp-desafio-selo { animation: bpGira 1.6s linear infinite; }
@media (max-width: 640px) {
  .bp-desafio-inner { grid-template-columns: auto minmax(0, 1fr); }
  .bp-desafio-selo { width: 46px; height: 46px; }
  .bp-desafio-btn { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bp-desafio-recebido.carregando .bp-desafio-selo { animation: none; } }

/* ---------- Cartões dos jogos (placas) ---------- */
.bp-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  list-style: none;
}
.bp-cartao {
  position: relative;
  padding: 6px;
  border-radius: 20px;
  background: var(--verde);
  box-shadow: 0 18px 40px rgba(14, 107, 70, .18);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.bp-cartao:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(14, 107, 70, .26); }
.bp-cartao-borda {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.4rem 1.3rem 1.3rem;
  border: 3px solid #fff;
  border-radius: 14px;
  color: rgba(255, 255, 255, .88);
}
.bp-cartao h3 {
  margin-top: .9rem;
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1.12;
  letter-spacing: -.012em;
}
.bp-cartao p { flex: 1; margin: .55rem 0 1.2rem; font-size: 1rem; line-height: 1.5; }
.bp-icone {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--amarelo);
  color: var(--tinta);
}
.bp-icone .icon { width: 30px; height: 30px; }
.bp-etiqueta {
  position: absolute;
  top: 1.6rem;
  right: 1.5rem;
  padding: .3rem .6rem .18rem;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
}
.bp-destaque { background: var(--asfalto-2); }
.bp-dois-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bp-dois-botoes .btn { padding-inline: .6rem; }

/* ---------- Ranking + conta ---------- */
.bp-rank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.bp-tabs-rank { margin-top: 2rem; overflow-x: auto; scrollbar-width: none; }
.bp-tabs-rank::-webkit-scrollbar { display: none; }
.bp-tabs-rank button { flex: 1 0 auto; white-space: nowrap; }
.bp-rank-lista { list-style: none; counter-reset: none; }
.bp-rank-lista li {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem .7rem;
  border-bottom: 1px solid var(--linha);
  font-size: 1.04rem;
}
.bp-rank-lista li.bp-rank-carrega { display: block; color: var(--texto-suave); }
.bp-rank-pos { font-weight: 900; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.bp-rank-nome { color: var(--tinta); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-rank-pts { font-weight: 900; color: var(--tinta); font-variant-numeric: tabular-nums; }
.bp-rank-lista li.top1 { background: #FFF6D6; border-radius: 12px; border-bottom-color: transparent; }
.bp-rank-lista li.top1 .bp-rank-pos { color: #A87800; }
.bp-rank-lista li.top2 .bp-rank-pos, .bp-rank-lista li.top3 .bp-rank-pos { color: var(--verde); }
.bp-rank-vazio, .bp-rank-nota { margin-top: 1rem; color: var(--texto-suave); font-size: .95rem; }
.bp-rank-voce {
  margin-top: 1rem;
  padding: .8rem 1rem .65rem;
  border-radius: 12px;
  background: var(--verde-claro);
  color: var(--verde-escuro);
  font-weight: 800;
}
.bp-conta { position: sticky; top: calc(var(--header-h) + 1.5rem); box-shadow: 0 24px 60px rgba(21, 36, 29, .14); border: 1px solid var(--linha); }
.bp-conta-titulo { color: var(--tinta); font-weight: 900; font-size: 1.5rem; line-height: 1.15; }
.bp-conta-sub { margin: .5rem 0 1.3rem; font-size: .96rem; }
.bp-idade { margin: .6rem 0 .4rem; padding: 0; border: 0; }
.bp-idade legend { margin-bottom: .3rem; color: var(--tinta); font-weight: 700; font-size: .93rem; }
.bp-sub { margin: 1.2rem 0 .5rem; color: var(--tinta); font-weight: 800; font-size: 1rem; }
.bp-melhores { list-style: none; margin-bottom: 1.2rem; }
.bp-melhores li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0 .4rem; border-bottom: 1px dashed var(--linha); font-size: .96rem; }
.bp-melhores li.vazio { color: var(--texto-suave); }
.bp-melhores strong { color: var(--tinta); }
.bp-detalhes { margin-top: 1rem; border-top: 1px solid var(--linha); padding-top: .9rem; }
.bp-detalhes summary { cursor: pointer; color: var(--verde); font-weight: 800; }
.bp-detalhes form { margin-top: .8rem; }
.bp-perigo { border-color: var(--vermelho); color: var(--vermelho); }
.bp-perigo:hover { background: var(--vermelho); color: #fff; }

/* ---------- Medalhas ---------- */
.bp-medalhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
  list-style: none;
}
.bp-medalha {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem 1rem 1rem;
  border: 1.5px solid var(--linha);
  border-radius: 12px;
  background: #fff;
  color: var(--texto-suave);
  font-size: .9rem;
  line-height: 1.4;
}
.bp-medalha strong { color: var(--texto); font-size: 1rem; }
.bp-medalha-icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .4rem; border-radius: 50%; background: #EEF1EF; color: #9AA59F; }
.bp-medalha-icone .icon { width: 24px; height: 24px; }
.bp-medalha.ok { border: 2px solid var(--amarelo); background: #FFFBEA; color: var(--texto); }
.bp-medalha.ok strong { color: var(--tinta); }
.bp-medalha.ok .bp-medalha-icone { background: var(--tinta); color: var(--amarelo); }

/* ---------- Chamada do NikiBrasil ---------- */
.bp-niki-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.bp-niki-chamada .secao-intro { margin-bottom: 1.6rem; color: rgba(255, 255, 255, .88); }
.bp-niki-mini { width: min(320px, 100%); height: auto; margin-inline: auto; display: block; animation: bpRespira 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bpRespira { 50% { transform: scale(1.025) rotate(-1deg); } }

/* ---------- Regras ---------- */
.bp-regras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.bp-regras-grid .secao-titulo { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.bp-lista { margin-top: 1.4rem; padding-left: 1.2rem; }
.bp-lista li { margin-bottom: .7rem; }
.bp-lista strong { color: var(--tinta); }

/* =====================================================================
   PALCO DOS JOGOS
   ===================================================================== */
.bp-palco {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 2vw, 24px);
  background: rgba(5, 30, 17, .78);
  backdrop-filter: blur(4px);
}
.bp-palco[hidden] { display: none; }
.bp-palco-caixa {
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--papel);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
  animation: entra .4s var(--ease) both;
}
.bp-palco-topo {
  display: flex;
  align-items: center;
  gap: .8rem 1rem;
  flex-wrap: wrap;
  padding: .8rem 1rem .8rem 1.3rem;
  background: var(--asfalto-2);
  color: #fff;
  border-bottom: 5px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--amarelo) 0 36px, transparent 36px 72px) 5;
}
.bp-palco-topo h2 { flex: 1 1 auto; color: #fff; font-weight: 900; font-size: 1.15rem; line-height: 1.2; }
.bp-hud { display: flex; gap: .45rem; flex-wrap: wrap; }
.bp-hud-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: .3rem .6rem .2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  line-height: 1.15;
}
.bp-hud-item small { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.bp-hud-item b { font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bp-hud-item.alerta { background: var(--amarelo); color: var(--tinta); }
.bp-fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.bp-fechar:hover { background: rgba(255, 255, 255, .2); }
.bp-palco-corpo {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2rem);
  overscroll-behavior: contain;
}

.bp-tela { display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 560px; margin: 0 auto; text-align: center; }
.bp-tela h3 { color: var(--tinta); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.12; letter-spacing: -.015em; }
.bp-tela-icone {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  background: var(--amarelo);
  color: var(--tinta);
}
.bp-tela-icone .icon { width: 42px; height: 42px; }
.bp-meta-desafio, .bp-dica { padding: .55rem .9rem .45rem; border-radius: 10px; background: #FFF6D6; color: #6B5200; font-weight: 700; font-size: .95rem; }
.bp-erro { color: var(--vermelho); font-weight: 700; }
.bp-campo-tema { width: min(260px, 100%); text-align: left; }

.bp-carregando { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; color: var(--texto-suave); }
.bp-roda { width: 44px; height: 44px; border: 4px solid var(--linha); border-top-color: var(--verde); border-radius: 50%; animation: bpGira .8s linear infinite; }
@keyframes bpGira { to { transform: rotate(360deg); } }

.bp-chip {
  display: inline-block;
  padding: .3rem .7rem .2rem;
  border-radius: 999px;
  background: var(--verde-claro);
  color: var(--verde-escuro);
  font-weight: 800;
  font-size: .82rem;
}

/* ---------- Quiz ---------- */
.bp-tempo { height: 10px; margin-bottom: 1.2rem; border-radius: 999px; background: var(--linha); overflow: hidden; }
.bp-tempo span { display: block; height: 100%; background: var(--verde); transform-origin: left; }
.bp-tempo.alerta span { background: var(--amarelo); }
.bp-quiz { max-width: 620px; margin: 0 auto; }
.bp-quiz-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--texto-suave); font-weight: 700; font-size: .95rem; }
.bp-quiz-pergunta { margin: 1rem 0 1.3rem; color: var(--tinta); font-weight: 900; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); line-height: 1.2; outline: none; }
.bp-opcoes { display: grid; gap: .65rem; width: 100%; }
.bp-opcao {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 58px;
  padding: .7rem 1rem .55rem;
  border: 2px solid var(--linha);
  border-radius: 14px;
  background: #fff;
  color: var(--tinta);
  font-family: var(--fonte);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.bp-opcao b { color: var(--verde); }
.bp-opcao:hover:not(:disabled) { border-color: var(--verde); }
.bp-opcao:active:not(:disabled) { transform: scale(.99); }
.bp-opcao:disabled { cursor: default; }
.bp-opcao.escolhida { border-color: var(--tinta); }
.bp-opcao.certa { border-color: #1E9D5C; background: #E3F6EB; }
.bp-opcao.errada { border-color: var(--vermelho); background: #FCE9E7; }
.bp-feedback { min-height: 1.6em; margin-top: 1rem; font-weight: 900; font-size: 1.15rem; text-align: center; }
.bp-feedback.ok { color: #157A47; }
.bp-feedback.erro { color: var(--vermelho); }
.bp-proxima { display: flex; margin: .6rem auto 0; }

/* ---------- Corrida ---------- */
.bp-corrida { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.bp-canvas { display: block; border-radius: 14px; touch-action: none; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.bp-controles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; width: min(440px, 100%); }
.bp-seta {
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  background: var(--asfalto-2);
  color: var(--amarelo);
  font-size: 1.5rem;
  cursor: pointer;
  touch-action: manipulation;
}
.bp-seta:active { background: var(--verde); }

/* ---------- Diferenças ---------- */
.bp-dif { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.bp-dif-img { border-radius: 12px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); cursor: crosshair; touch-action: manipulation; }
.bp-dif-img svg { display: block; width: 100%; height: auto; }
.bp-dif-status { margin-bottom: .8rem; text-align: center; color: var(--tinta); font-weight: 800; }
.bp-marca-ok { fill: none; stroke: #18A058; stroke-width: 3.5; }
.bp-marca-faltou { fill: none; stroke: var(--vermelho); stroke-width: 3; stroke-dasharray: 5 4; }
.bp-marca-erro { fill: var(--vermelho); font: 900 26px Arial, sans-serif; text-anchor: middle; }
.bp-palco-corpo > .btn-text { display: flex; margin: 1rem auto 0; }

/* ---------- Caça-palavras ---------- */
.bp-caca {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 3px;
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--verde);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.bp-letra {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--tinta);
  font-family: var(--fonte-placa);
  font-weight: 700;
  font-size: clamp(1rem, .7rem + 1.4vw, 1.35rem);
  line-height: 1;
  cursor: pointer;
}
.bp-letra.sel { background: var(--amarelo); }
.bp-letra.achada { background: #BFE7D0; color: var(--verde-escuro); }
.bp-letra.achada.sel { background: var(--amarelo); }
.bp-caca-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1rem auto 0; max-width: 560px; list-style: none; }
.bp-caca-lista li { padding: .35rem .7rem .25rem; border-radius: 8px; background: #fff; border: 1.5px solid var(--linha); color: var(--tinta); font-weight: 800; font-size: .9rem; letter-spacing: .04em; }
.bp-caca-lista li.ok { background: var(--verde-claro); border-color: transparent; color: var(--verde); text-decoration: line-through; }

/* ---------- Memória ---------- */
.bp-memoria { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; width: min(440px, 100%); margin: 0 auto; perspective: 900px; }
.bp-carta {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
}
.bp-carta.virada { transform: rotateY(180deg); }
.bp-carta-verso, .bp-carta-frente { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp-carta-verso {
  background: var(--verde);
  border: 3px solid #fff;
  box-shadow: inset 0 0 0 4px var(--verde), 0 4px 12px rgba(0, 0, 0, .15);
  background-image: radial-gradient(circle at 50% 50%, var(--amarelo) 0 12%, transparent 13%);
}
.bp-carta-frente { background: #fff; border: 3px solid var(--linha); transform: rotateY(180deg); }
.bp-carta-frente svg { width: 76%; height: auto; }
.bp-carta.par .bp-carta-frente { border-color: #1E9D5C; background: #EFFAF3; }

/* ---------- Desafio do dia ---------- */
.bp-dia-texto { color: var(--tinta); font-weight: 800; font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); line-height: 1.3; }
.bp-letras-dia { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.bp-letras-dia span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 52px;
  border-radius: 10px;
  background: var(--verde);
  color: #fff;
  font-family: var(--fonte-placa);
  font-weight: 700;
  font-size: 1.6rem;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--verde);
}
.bp-dia-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: .6rem; width: 100%; }
.bp-dia-form .field { flex: 1 1 220px; margin: 0; text-align: left; }
.bp-dia-form input { text-transform: uppercase; }
.bp-dia .bp-opcoes { max-width: 520px; }

/* ---------- Você escolhe ---------- */
.bp-escolha-ops { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; width: 100%; }
.bp-escolha-op {
  min-height: 150px;
  padding: 1.2rem;
  border: 0;
  border-radius: 18px;
  background: var(--verde);
  color: #fff;
  font-family: var(--fonte);
  font-weight: 900;
  font-size: clamp(1.1rem, .9rem + .9vw, 1.4rem);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--verde);
  transition: transform .15s ease, background-color .15s ease;
}
.bp-escolha-op.op1 { background: var(--azul); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--azul); }
.bp-escolha-op:hover:not(:disabled) { transform: translateY(-3px); }
.bp-ou { color: var(--texto-suave); font-weight: 900; text-transform: uppercase; }
.bp-pct { position: relative; width: 100%; min-height: 58px; border-radius: 14px; background: #fff; border: 2px solid var(--linha); overflow: hidden; text-align: left; }
.bp-pct-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #DDEFE5; transition: width .9s var(--ease); }
.bp-pct.minha { border-color: var(--verde); }
.bp-pct.minha .bp-pct-fill { background: #BFE7D0; }
.bp-pct-txt { position: relative; display: block; padding: 1rem 1rem .85rem; color: var(--tinta); font-weight: 700; }
.bp-pct-txt strong { font-weight: 900; font-size: 1.15rem; margin-right: .3rem; }

/* ---------- Resultado ---------- */
.bp-resultado-rotulo { color: var(--texto-suave); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.bp-resultado-pontos { color: var(--tinta); font-weight: 900; font-size: clamp(3rem, 2rem + 4vw, 4.4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bp-resultado-linha { color: var(--texto); font-weight: 600; }
.bp-selo { padding: .45rem .9rem .35rem; border-radius: 999px; background: var(--amarelo); color: var(--tinta); font-weight: 900; }
.bp-desafio-resultado { padding: .7rem 1rem .6rem; border-radius: 12px; background: #FCE9E7; color: #8E2A22; font-weight: 800; }
.bp-desafio-resultado.ok { background: #E3F6EB; color: #157A47; }
.bp-novas { list-style: none; display: grid; gap: .4rem; }
.bp-novas li { padding: .5rem .9rem .4rem; border-radius: 10px; background: #FFFBEA; border: 2px solid var(--amarelo); color: var(--tinta); }
.bp-resultado-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .4rem; }
.bp-apelido-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: .6rem; width: 100%; }
.bp-apelido-form .field { flex: 1 1 200px; margin: 0; text-align: left; }
.bp-apelido-form .form-msg { flex-basis: 100%; margin: 0; }
.bp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1rem;
  width: 100%;
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--linha);
  text-align: left;
  font-size: .95rem;
}
.bp-cta p { flex: 1 1 240px; }
.bp-cta strong { color: var(--tinta); }

.bp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 300;
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: .9rem 1.2rem .8rem;
  border-radius: 14px;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}

/* =====================================================================
   NIKIBRASIL
   ===================================================================== */
.nk-hero-grid { align-items: center; }
.nk-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.nk-palco {
  position: relative;
  padding: 7px;
  border-radius: 24px;
  background: var(--verde);
  box-shadow: 0 30px 70px rgba(14, 107, 70, .25);
}
.nk-palco-borda {
  position: relative;
  border: 3px solid #fff;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(#CDEBFF 0 62%, #8FD9B0 62% 100%);
}
.nk-palco-borda.noite { background: linear-gradient(#1C3F94 0 62%, #2E7D4F 62% 100%); }
.nk-palco-borda.encerrado { background: linear-gradient(#0A4F34, #083F22); }
.nk-cena { display: block; width: 100%; height: auto; }
.nk-balao {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: min(88%, 400px);
  padding: .8rem 1rem .7rem;
  border-radius: 16px;
  background: #fff;
  color: var(--tinta);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
.nk-balao::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
.nk-status { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .4rem; }
.nk-estado { padding: .4rem .85rem .3rem; border-radius: 999px; font-weight: 900; font-size: .95rem; background: var(--verde-claro); color: var(--verde-escuro); }
.nk-estado.fome, .nk-estado.muita_fome { background: #FFF1C7; color: #6B5200; }
.nk-estado.doente, .nk-estado.muito_doente { background: #FCE9E7; color: #8E2A22; }
.nk-estado.encerrado { background: #E6E9E7; color: var(--texto); }
.nk-tempo { color: var(--texto-suave); font-size: .93rem; }
.nk-barras { display: grid; gap: .7rem; margin: 1rem 0 1.3rem; }
.nk-barra { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: .7rem; font-weight: 700; font-size: .95rem; color: var(--tinta); }
.nk-barra-trilho { height: 14px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.nk-barra-trilho span { display: block; height: 100%; border-radius: 999px; background: var(--verde); transition: width .6s var(--ease); }
.nk-barra.baixa .nk-barra-trilho span { background: var(--amarelo); }
.nk-barra.critica .nk-barra-trilho span { background: var(--vermelho); }
.nk-barra b { text-align: right; font-variant-numeric: tabular-nums; }
.nk-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.nk-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 92px;
  padding: .8rem .6rem .7rem;
  border: 0;
  border-radius: 16px;
  background: var(--verde);
  color: #fff;
  font-family: var(--fonte);
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--verde);
  transition: transform .12s ease, opacity .2s ease;
}
.nk-acao .nk-emoji { display: grid; place-items: center; line-height: 1; }
.nk-acao .nk-emoji .icon { width: 1.75rem; height: 1.75rem; }
.nk-acao small { font-weight: 700; font-size: .78rem; opacity: .85; }
.nk-acao:active:not(:disabled) { transform: scale(.98); }
.nk-acao.destaque { background: var(--amarelo); color: var(--tinta); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--amarelo); }
.nk-acao.cuidar { background: var(--azul); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--azul); }
.nk-acao.cheio { grid-column: 1 / -1; min-height: 70px; flex-direction: row; gap: .6rem; }
.nk-acao:disabled { opacity: .45; cursor: not-allowed; }
.nk-acao.is-loading { opacity: .7; }
.nk-aviso { margin-top: 1rem; padding: .8rem 1rem .7rem; border-radius: 12px; background: #E8F0FB; color: #1C3F94; font-weight: 700; font-size: .95rem; }

.nk-chat { display: flex; flex-direction: column; height: 100%; }
.nk-msgs { flex: 1; min-height: 220px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .8rem; border-radius: 14px; background: var(--papel); }
.nk-msg { max-width: 85%; padding: .6rem .85rem .5rem; border-radius: 14px; font-size: .97rem; line-height: 1.4; }
.nk-msg.user { align-self: flex-end; background: var(--verde); color: #fff; border-bottom-right-radius: 4px; }
.nk-msg.niki { align-self: flex-start; background: #fff; color: var(--tinta); border-bottom-left-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.nk-msgs .vazio { margin: auto; color: var(--texto-suave); text-align: center; font-size: .93rem; }
.nk-botoes { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0; }
.nk-botoes button {
  min-height: 42px;
  padding: .45rem .9rem .3rem;
  border: 2px solid var(--verde);
  border-radius: 999px;
  background: #fff;
  color: var(--verde);
  font-family: var(--fonte);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
}
.nk-botoes button:hover:not(:disabled) { background: var(--verde-claro); }
.nk-form-chat { display: flex; gap: .5rem; }
.nk-form-chat input { flex: 1; min-height: 50px; padding: .5rem .9rem; border: 2px solid var(--linha); border-radius: 12px; font: inherit; }
.nk-form-chat input:focus { outline: none; border-color: var(--verde); }
.nk-chat-nota { margin-top: .6rem; color: var(--texto-suave); font-size: .85rem; }

.nk-secoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.nk-bloco { padding: clamp(1.1rem, 2.5vw, 1.6rem); border-radius: 18px; background: #fff; border: 1px solid var(--linha); }
.nk-bloco h3 { color: var(--tinta); font-weight: 900; font-size: 1.25rem; margin-bottom: .8rem; }
.nk-lista { list-style: none; display: grid; gap: .5rem; }
.nk-lista li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .2rem .45rem; border-bottom: 1px dashed var(--linha); font-size: .95rem; }
.nk-lista li.ok strong { color: var(--verde); }
.nk-lista li.nao { color: var(--texto-suave); }
.nk-meta-barra { flex: 0 0 90px; height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.nk-meta-barra span { display: block; height: 100%; background: var(--verde); }
.nk-acessorios { display: flex; flex-wrap: wrap; gap: .5rem; }
.nk-acessorios button { min-height: 44px; padding: .4rem .8rem .3rem; border: 2px solid var(--linha); border-radius: 12px; background: #fff; color: var(--tinta); font-family: var(--fonte); font-weight: 800; font-size: .88rem; cursor: pointer; }
.nk-acessorios button[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); }
.nk-acessorios button:disabled { opacity: .5; cursor: not-allowed; }
.nk-canal { padding: .8rem 0; border-bottom: 1px dashed var(--linha); }
.nk-canal:last-of-type { border-bottom: 0; }
.nk-canal-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 800; color: var(--tinta); }
.nk-canal p { font-size: .9rem; color: var(--texto-suave); margin-top: .2rem; }
.nk-canal form { margin-top: .6rem; }
.nk-canal .btn { min-height: 44px; }
.nk-pill { padding: .25rem .6rem .15rem; border-radius: 999px; font-size: .78rem; font-weight: 900; background: var(--linha); color: var(--texto); }
.nk-pill.on { background: var(--verde-claro); color: var(--verde-escuro); }
.nk-fim { text-align: center; padding: clamp(1.4rem, 4vw, 2.5rem); }
.nk-fim h2 { color: var(--tinta); font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.15; }
.nk-fim p { max-width: 46ch; margin: .8rem auto 0; }
.nk-tabela { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .95rem; }
.nk-tabela th, .nk-tabela td { padding: .7rem .6rem .55rem; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.nk-tabela th { color: var(--tinta); font-weight: 800; }
.nk-tabela td:first-child { white-space: nowrap; font-weight: 700; color: var(--tinta); }
.nk-adocao { max-width: 520px; }

/* Niki: animações (respeitam quem prefere menos movimento) */
.nk-rabo { transform-origin: 236px 236px; animation: nkRabo .5s ease-in-out infinite alternate; }
.nk-corpo-feliz { animation: bpRespira 3s ease-in-out infinite; transform-origin: 160px 300px; }
.nk-pulo { animation: nkPulo .6s var(--ease); transform-origin: 160px 300px; }
@keyframes nkRabo { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
@keyframes nkPulo { 40% { transform: translateY(-18px); } }
.nk-coracao { animation: nkSobe 1.4s ease-out forwards; }
@keyframes nkSobe { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-60px); } }

@media (prefers-reduced-motion: reduce) {
  .bp-niki-mini, .nk-rabo, .nk-corpo-feliz, .nk-pulo, .nk-coracao, .bp-carta { animation: none !important; transition: none !important; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .bp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bp-rank-grid, .bp-niki-grid, .bp-regras-grid, .nk-area, .nk-secoes { grid-template-columns: 1fr; }
  .bp-conta { position: static; }
  .bp-niki-arte { order: -1; }
  .bp-niki-mini { width: 200px; }
}
@media (max-width: 640px) {
  .bp-grade { grid-template-columns: 1fr; }
  .bp-palco { padding: 0; }
  .bp-palco-caixa { height: 100%; border-radius: 0; }
  .bp-palco-topo { padding: .6rem .7rem .6rem 1rem; }
  .bp-palco-topo h2 { font-size: 1rem; flex-basis: calc(100% - 60px); }
  .bp-hud { order: 3; width: 100%; }
  .bp-hud-item { flex: 1; min-width: 0; }
  .bp-dif { grid-template-columns: 1fr; gap: .5rem; }
  .bp-escolha-ops { grid-template-columns: 1fr; }
  .bp-escolha-op { min-height: 110px; }
  .bp-dois-botoes { grid-template-columns: 1fr; }
  .nk-barra { grid-template-columns: 6.3rem 1fr 2.6rem; font-size: .88rem; }
  .bp-letras-dia span { width: 38px; height: 46px; font-size: 1.35rem; }
}

/* =====================================================================
   DESTAQUE COM FOTOS (telas reais dos jogos dentro de celulares)
   ===================================================================== */
.bp-celular {
  position: relative;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(145deg, #2a302d, #0c100e);
  box-shadow: 0 0 0 2px #3c4440, 0 40px 80px rgba(0, 0, 0, .45);
}
.bp-celular::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 16px;
  margin-left: -15%;
  border-radius: 999px;
  background: #0c100e;
}
.bp-celular-tela {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: 31px;
  overflow: hidden;
  background: var(--papel);
}
.bp-celular-tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bp-celular-grande { width: min(290px, 74vw); margin-inline: auto; transform: rotate(-3deg); }
.bp-celular-mini { width: 150px; padding: 6px; border-radius: 26px; }
.bp-celular-mini::before { top: 11px; height: 10px; }
.bp-celular-mini .bp-celular-tela { border-radius: 20px; }

/* Carrossel: troca de tela a cada 3 s (7 telas = 21 s) */
.bp-carrossel img { opacity: 0; animation: bpTela 21s infinite; animation-delay: calc(var(--i) * 3s); }
.bp-carrossel img:first-child { opacity: 1; }
@keyframes bpTela {
  0% { opacity: 0; transform: scale(1.03); }
  3% { opacity: 1; transform: none; }
  14.3% { opacity: 1; }
  17.3% { opacity: 0; }
  100% { opacity: 0; }
}

.bp-hero-celular { position: relative; padding: 1rem 0; }
.bp-selo-flutuante {
  position: absolute;
  z-index: 3;
  padding: .55rem .9rem .45rem;
  border-radius: 14px;
  background: #fff;
  color: var(--tinta);
  font-weight: 900;
  font-size: .95rem;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
  animation: bpFlutua 4s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bp-selo-flutuante .icon { width: 1.05em; height: 1.05em; flex: none; }
.bp-selo-flutuante.s1 { top: 14%; left: 0; background: #E3F6EB; color: #157A47; }
.bp-selo-flutuante.s2 { top: 34%; right: 0; background: var(--amarelo); animation-delay: -1s; }
.bp-selo-flutuante.s3 { bottom: 26%; left: 2%; animation-delay: -2s; }
.bp-selo-flutuante.s4 { bottom: 8%; right: 4%; background: var(--whatsapp); color: #fff; animation-delay: -3s; }
@keyframes bpFlutua { 50% { transform: translateY(-10px); } }

/* Faixa do Desafio do Dia */
.bp-faixa-dia { background: var(--amarelo); color: var(--tinta); overflow: hidden; }
.bp-faixa-dia-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem 2rem; padding: 1.2rem 0; }
.bp-faixa-dia-foto {
  width: 96px;
  height: 120px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 16px;
  border: 4px solid var(--tinta);
  transform: rotate(-4deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
.bp-faixa-dia .bp-placa-dia-topo { border-bottom-color: rgba(21, 36, 29, .25); padding-bottom: .4rem; justify-content: flex-start; gap: 1.2rem; }
.bp-faixa-dia h2 { margin-top: .5rem; font-weight: 900; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.1; color: var(--tinta); }
.bp-faixa-dia-texto p:last-child { margin-top: .3rem; color: #3b4a42; }
.bp-faixa-dia-acao { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.bp-faixa-dia .btn-yellow { background: var(--tinta); color: #fff; }
.bp-faixa-dia .btn-yellow:hover { background: var(--asfalto-2); }
.bp-faixa-dia .bp-sequencia { background: rgba(21, 36, 29, .1); color: var(--tinta); }

/* Vitrine com foto no topo de cada cartão */
.bp-vitrine {
  position: relative;
  display: flex;
  justify-content: center;
  gap: .6rem;
  height: 190px;
  margin: -1.4rem -1.3rem 1.1rem;
  padding-top: 1.4rem;
  overflow: hidden;
  border-radius: 11px 11px 0 0;
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 199, 44, .45), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 26px),
    var(--asfalto-2);
}
.bp-vitrine .bp-celular-mini { flex: 0 0 150px; transition: transform .35s var(--ease); }
.bp-vitrine-dupla .bp-celular-mini { flex-basis: 128px; width: 128px; }
.bp-vitrine-dupla .bp-celular-mini:first-child { transform: rotate(-4deg) translateY(10px); }
.bp-vitrine-dupla .bp-celular-mini:last-child { transform: rotate(4deg) translateY(10px); }
.bp-cartao:hover .bp-vitrine .bp-celular-mini { transform: translateY(-8px); }
.bp-cartao:hover .bp-vitrine-dupla .bp-celular-mini:first-child { transform: rotate(-4deg) translateY(0); }
.bp-cartao:hover .bp-vitrine-dupla .bp-celular-mini:last-child { transform: rotate(4deg) translateY(0); }
.bp-cartao .bp-icone { position: relative; z-index: 1; margin-top: -2.6rem; box-shadow: 0 0 0 4px var(--verde); }
.bp-destaque .bp-icone { box-shadow: 0 0 0 4px var(--asfalto-2); }
.bp-etiqueta { z-index: 2; background: rgba(8, 63, 34, .85); }

/* Como funciona */
.bp-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; counter-reset: none; }
.bp-passos li { position: relative; padding: 1.4rem 1.2rem 1.2rem; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.bp-passos h3 { margin: .8rem 0 .35rem; color: #fff; font-weight: 900; font-size: 1.2rem; }
.bp-passos p { color: rgba(255, 255, 255, .8); font-size: .97rem; }
.bp-passo-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--amarelo); color: var(--tinta); font-weight: 900; font-size: 1.3rem; }

/* NikiBrasil com fotos */
.bp-niki-arte { position: relative; max-width: 440px; margin-inline: auto; }
.bp-niki-foto { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); transform: rotate(-2deg); }
.bp-niki-cel { position: absolute; right: -6%; bottom: -10%; width: 132px; transform: rotate(5deg); }
.bp-niki-galeria { display: flex; gap: .7rem; margin: 0 0 1.6rem; list-style: none; }
.bp-niki-galeria img { width: 92px; height: 92px; object-fit: cover; border-radius: 16px; border: 3px solid #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .2); }

@media (prefers-reduced-motion: reduce) {
  .bp-carrossel img { animation: none; }
  .bp-selo-flutuante { animation: none; }
}
@media (max-width: 1024px) {
  .bp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-hero-celular { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .bp-faixa-dia-inner { grid-template-columns: auto 1fr; }
  .bp-faixa-dia-acao { grid-column: 1 / -1; align-items: stretch; }
  .bp-faixa-dia-foto { width: 72px; height: 92px; }
  .bp-passos { grid-template-columns: 1fr; }
  .bp-selo-flutuante { font-size: .82rem; padding: .45rem .7rem .35rem; }
  .bp-niki-cel { width: 100px; right: -2%; }
}

/* Grades não podem passar da largura da tela (abas do ranking roláveis no celular) */
.bp-rank-grid > *, .bp-niki-grid > *, .bp-regras-grid > *, .nk-area > *, .nk-secoes > * { min-width: 0; }
@media (max-width: 900px) {
  .bp-rank-grid, .bp-niki-grid, .bp-regras-grid, .nk-area, .nk-secoes { grid-template-columns: minmax(0, 1fr); }
}

/* Barra de status do celular: a tela começa abaixo do "notch" */
.bp-celular-tela { background: var(--asfalto-2); }
.bp-celular-tela img { top: 26px; height: calc(100% - 26px); }
.bp-celular-mini .bp-celular-tela img { top: 16px; height: calc(100% - 16px); }
@media (max-width: 640px) { .bp-selo-flutuante.s3 { display: none; } }

/* NikiBrasil: estados com foto */
.nk-estados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: 1.6rem; list-style: none; }
.nk-estados li { overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 10px 24px rgba(21, 36, 29, .07); }
.nk-estados img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.nk-estados div { padding: .8rem .9rem .9rem; font-size: .92rem; line-height: 1.4; }
.nk-estados strong { display: block; color: var(--tinta); font-weight: 900; font-size: 1.02rem; }
.nk-estados .nk-quando { display: inline-block; margin: .25rem 0 .35rem; padding: .15rem .5rem .05rem; border-radius: 6px; background: var(--verde-claro); color: var(--verde-escuro); font-weight: 800; font-size: .78rem; }
.nk-como-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4rem); }
.nk-acess-fotos { display: flex; gap: .6rem; margin-top: 1rem; list-style: none; }
.nk-acess-fotos img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; border: 2px solid var(--linha); }
@media (max-width: 900px) {
  .nk-como-grid { grid-template-columns: minmax(0, 1fr); }
  .nk-estados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nk-intro-arte { max-width: 420px; }
.nk-intro-arte .bp-selo-flutuante.s1 { top: -4%; left: -6%; }
.nk-intro-arte .bp-selo-flutuante.s2 { top: 42%; right: auto; left: -10%; }
@media (max-width: 640px) { .nk-intro-arte .bp-selo-flutuante.s1 { left: 0; } .nk-intro-arte .bp-selo-flutuante.s2 { left: 0; } }
.nk-intro-arte { margin-right: 12%; }
.nk-intro-arte .bp-niki-cel { right: -24%; bottom: -14%; width: 128px; }
.nk-intro-arte .bp-selo-flutuante.s2 { top: auto; bottom: 6%; left: -8%; }
@media (max-width: 640px) { .nk-intro-arte { margin-right: 22%; } .nk-intro-arte .bp-niki-cel { right: -30%; width: 104px; } }
@media (max-width: 640px) { .nk-intro-arte .bp-selo-flutuante.s2 { left: 0; bottom: 4%; } }

/* ===== Niki: chamadas para cotação e Brasil Renda Mais ===== */
.nk-promos { display: grid; gap: .7rem; margin-top: 1.2rem; }
.nk-promo {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: var(--asfalto);
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  box-shadow: inset 0 0 0 4px var(--asfalto), inset 0 0 0 6px rgba(255, 255, 255, .8);
  transition: transform .15s ease, box-shadow .2s ease;
}
.nk-promo:hover, .nk-promo:focus-visible { transform: translateY(-2px); }
.nk-promo-emoji { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--verde-claro); color: var(--verde); line-height: 1; }
.nk-promo-emoji .icon { width: 1.4rem; height: 1.4rem; }
.nk-promo-txt { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.4; }
.nk-promo-txt strong { display: block; margin-bottom: .15rem; color: #fff; font-weight: 900; font-size: 1.05rem; }
.nk-promo-txt b { color: var(--amarelo); font-weight: 900; }
.nk-promo-cta {
  flex: none;
  padding: .55rem .9rem .45rem;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--tinta);
  font-weight: 900;
  font-size: .9rem;
}
.nk-promo-renda { background: var(--verde); box-shadow: inset 0 0 0 4px var(--verde), inset 0 0 0 6px rgba(255, 255, 255, .8); }
.nk-promo-pisca { animation: nk-promo-pisca 1.1s ease 2; }
@keyframes nk-promo-pisca {
  0%, 100% { transform: none; }
  30% { transform: scale(1.03); box-shadow: inset 0 0 0 4px var(--verde), inset 0 0 0 6px var(--amarelo), 0 0 0 6px rgba(255, 199, 44, .35); }
}
@media (max-width: 400px) {
  .nk-promo { flex-wrap: wrap; }
  .nk-promo-cta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .nk-promo-pisca { animation: none; } }

/* ===== Niki: convite para amigos (WhatsApp) ===== */
.nk-convite { margin-top: .7rem; padding: 1rem; border-radius: 16px; background: #fff; border: 2px dashed var(--verde); }
.nk-convite-topo { display: flex; align-items: center; gap: .85rem; }
.nk-convite-topo strong { display: block; color: var(--tinta); font-weight: 900; font-size: 1.05rem; }
.nk-convite-topo span:not(.nk-promo-emoji) { display: block; font-size: .88rem; line-height: 1.4; color: var(--texto); }
.nk-convite-acoes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .6rem; margin-top: .85rem; }
.nk-convite-acoes .btn { width: 100%; justify-content: center; }
@media (max-width: 400px) { .nk-convite-acoes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Revisão 22/10/2026 ---------- */
.bp-hero h1 { letter-spacing: -.02em; }
.bp-h1-sub { display: block; margin-top: .35rem; font-size: .42em; font-weight: 700; letter-spacing: 0; line-height: 1.2; color: rgba(255, 255, 255, .82); }
.bp-novas li { display: flex; align-items: center; gap: .45rem; }
.bp-novas .icon, .bp-sequencia .icon { width: 1.1em; height: 1.1em; flex: none; }
.bp-legal-links { margin-top: 1.2rem; color: var(--texto-suave); font-size: .95rem; }
.bp-legal-links a { color: var(--verde, #157A47); font-weight: 700; }
#nkSeguidos { display: inline-flex; align-items: center; gap: .4rem; }
#nkSeguidos .icon, #nkConquistas strong .icon { width: 1.1em; height: 1.1em; margin-right: .3rem; vertical-align: -.15em; color: #C77700; }
.nk-coracao { transform-box: fill-box; transform-origin: center; }