/* ÁREA VIP — o tema escuro e dourado da área de membros (o mesmo espírito da Área VIP do gerador, com letra e
   botões grandes pro público 50+). Carregado DEPOIS do estilo.css em toda página da área (body.vip). */
.vip {
  --vip-bg: #0b0a08;
  --vip-card: #15130e;
  --vip-card2: #1c1912;
  --vip-ouro: #f5c842;
  --vip-ouro-claro: #ffe98a;
  --vip-ouro-escuro: #b8860b;
  --vip-texto: #f6f1e3;
  --vip-suave: #cfc6ad;
  --vip-linha: rgba(245, 200, 66, .22);
  --vip-verde: #1fa855;
  --vip-raio: 22px;
  color-scheme: dark;
  background-color: var(--vip-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245, 200, 66, .16), transparent 70%),
    radial-gradient(circle at 15% 30%, rgba(255, 233, 138, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 12%, rgba(255, 233, 138, .45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 85% 60%, rgba(255, 233, 138, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 35% 75%, rgba(255, 233, 138, .35) 0 1px, transparent 1.6px),
    linear-gradient(rgba(245, 200, 66, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 200, 66, .025) 1px, transparent 1px);
  background-size: 100% 100%, 220px 260px, 300px 240px, 260px 320px, 340px 280px, 80px 80px, 80px 80px;
  background-attachment: fixed;
  color: var(--vip-texto);
  font-size: 18px;
}
.vip h1, .vip h2, .vip h3 { color: #fff; }
.vip p { color: var(--vip-suave); }
.vip a { color: var(--vip-ouro-claro); }
.vip .eyebrow { color: var(--vip-ouro); letter-spacing: .14em; }
.vip .muted, .vip .text-link { color: var(--vip-suave); }

/* topo e rodapé */
.vip .site-header { background: rgba(11, 10, 8, .86); border-bottom: 1px solid var(--vip-linha); backdrop-filter: blur(8px); }
.vip .brand span { color: #fff; }
.vip .brand small { display: block; color: var(--vip-ouro); font-size: 11px; font-weight: 800; letter-spacing: .22em; margin-top: 2px; }
.vip .nav-link { color: var(--vip-ouro-claro); }
.vip .site-footer { background: #070605; border-top: 1px solid var(--vip-linha); }
.vip .site-footer p, .vip .site-footer a { color: var(--vip-suave); }
.vip .site-footer .brand span { color: #fff; }

/* botões, painéis e formulários */
.vip .button {
  background: linear-gradient(180deg, var(--vip-ouro-claro), var(--vip-ouro) 45%, #e2ad16);
  color: #1d1505; border: 0; min-height: 58px; font-size: 18px; font-weight: 800; border-radius: 16px;
  box-shadow: 0 10px 28px rgba(245, 200, 66, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.vip .button:hover { filter: brightness(1.06); }
.vip .button.secondary, .vip .button.ghost, .vip .button.light {
  background: transparent; color: var(--vip-ouro-claro); border: 2px solid rgba(245, 200, 66, .55); box-shadow: none;
}
.vip .button.verde { background: linear-gradient(180deg, #2fd16f, var(--vip-verde)); color: #04220f; box-shadow: 0 10px 26px rgba(31, 168, 85, .25); }
.vip .panel, .vip .content-card { background: var(--vip-card); border: 1px solid var(--vip-linha); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.vip label { color: #fff; font-size: 18px; }
.vip input, .vip select {
  background: #0f0d09; color: #fff; border: 2px solid #4b4128; border-radius: 14px; min-height: 58px; font-size: 20px;
}
.vip input:focus, .vip select:focus { outline: 3px solid rgba(245, 200, 66, .55); border-color: var(--vip-ouro); }
.vip .form-error { color: #ffb4a6; background: rgba(255, 90, 60, .1); border-color: rgba(255, 120, 90, .4); }
.vip .tag, .vip .plan-pill { background: rgba(245, 200, 66, .14); color: var(--vip-ouro-claro); border: 1px solid var(--vip-linha); }
.vip .toast { background: var(--vip-ouro); color: #1d1505; font-weight: 800; }
.vip .back-link { color: var(--vip-ouro-claro); font-size: 18px; display: inline-block; padding: 8px 0; }
.vip .video-placeholder { background: linear-gradient(160deg, #1d1a12, #0f0d09); border: 1px solid var(--vip-linha); color: #fff; }
.vip .icon { color: var(--vip-ouro); }

/* ---------------------------------------------------------------- a Área VIP (início) */
.vip-hero {
  position: relative; margin: 28px auto 0; max-width: 720px; padding: 28px 22px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(245, 200, 66, .08), rgba(245, 200, 66, .02)), var(--vip-card);
  border: 1px solid rgba(245, 200, 66, .4); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 70px rgba(245, 200, 66, .1);
}
.vip-cabeca { display: flex; align-items: center; gap: 16px; }
.vip-selo {
  width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2c2616, #0d0b07); border: 2px solid var(--vip-ouro);
  box-shadow: 0 0 24px rgba(245, 200, 66, .35);
}
.vip-selo img { width: 40px; height: 40px; }
.vip-titulo { margin: 0; font-size: 30px; line-height: 1.05; font-weight: 900;
  background: linear-gradient(180deg, var(--vip-ouro-claro), var(--vip-ouro) 60%, var(--vip-ouro-escuro));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-sub { margin: 4px 0 0; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.vip .vip-ola { margin: 22px 0 4px; color: #fff; font-size: 22px; font-weight: 800; }
.vip-ola + p { margin: 0 0 18px; }
.vip-plano { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 15px;
  font-weight: 800; color: #1d1505; background: var(--vip-ouro); }
.vip-plano.basico { background: rgba(245, 200, 66, .16); color: var(--vip-ouro-claro); border: 1px solid var(--vip-linha); }
.vip-plano svg { width: 18px; height: 18px; }

/* cada opção é um CARTÃO com botão "Abrir" (20/10: o dono não percebia que dava pra tocar) */
.vip-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.vip-item a, .vip-item .vip-item-corpo {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 16px 14px 16px 10px; min-height: 84px;
  text-decoration: none; color: inherit; border-radius: 18px; border: 1px solid rgba(245, 200, 66, .38);
  background: linear-gradient(180deg, rgba(245, 200, 66, .09), rgba(245, 200, 66, .02)), var(--vip-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 233, 138, .08);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.vip-item a:hover, .vip-item a:focus-visible { border-color: var(--vip-ouro); box-shadow: 0 0 0 2px rgba(245, 200, 66, .35), 0 10px 26px rgba(0, 0, 0, .45); }
.vip-item a:active { transform: scale(.985); }
.vip-abrir { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  font-size: 16px; font-weight: 850; color: #1d1505; background: linear-gradient(180deg, var(--vip-ouro-claro), var(--vip-ouro) 50%, var(--vip-ouro-escuro));
  box-shadow: 0 4px 14px rgba(245, 200, 66, .3); }
.vip-abrir b { font-size: 22px; line-height: 1; }
/* trancado: bem diferente do liberado (tracejado, apagado, com "Liberar") — e continua tocável: leva pro Completo */
.vip-item.trancado a { border: 1px dashed rgba(207, 198, 173, .4); background: rgba(255, 255, 255, .025); box-shadow: none; }
.vip-item.trancado .vip-num { color: #77705f; }
.vip-item.trancado em { color: #9a927f; }
.vip-so-completo { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--vip-ouro); }
.vip-num { font-size: 26px; font-weight: 900; color: var(--vip-ouro); text-align: center; }
.vip-item strong { display: block; color: #fff; font-size: 20px; line-height: 1.2; }
.vip-item em { display: block; margin-top: 3px; font-style: normal; color: var(--vip-suave); font-size: 16px; line-height: 1.35; }
.vip-seta { color: var(--vip-ouro); font-size: 28px; font-weight: 300; }
.vip-item.trancado strong { color: #c9c2ad; }
.vip-trava { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15px;
  font-weight: 850; color: var(--vip-ouro-claro); background: rgba(245, 200, 66, .08); border: 1px solid var(--vip-linha); white-space: nowrap; }
.vip-trava svg { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .vip-hero { padding: 22px 14px; }
  .vip-item a, .vip-item .vip-item-corpo { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 14px 12px 14px 8px; }
  .vip-num { font-size: 24px; }
  .vip-abrir { padding: 0 13px; font-size: 15px; }
  .vip-trava { padding: 0 10px; font-size: 14px; gap: 4px; }
}

.vip-upgrade { margin-top: 22px; padding: 20px; border-radius: 20px; text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(245, 200, 66, .18), transparent 70%), var(--vip-card2);
  border: 1px dashed rgba(245, 200, 66, .55); }
.vip-upgrade h2 { margin: 0 0 6px; font-size: 22px; }
.vip-upgrade p { margin: 0 0 16px; }
.vip-upgrade .button, .vip-acoes .button { width: 100%; }
.vip-acoes { display: grid; gap: 12px; margin-top: 22px; }
.vip-nota { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--vip-linha); font-size: 15px; text-align: center; }
.vip-18 { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--vip-linha); color: #fff; font-weight: 800; font-size: 14px; }
.vip-sair { margin: 26px auto 40px; max-width: 720px; text-align: center; }
.vip-sair p { font-size: 15px; }

/* ---------------------------------------------------------------- páginas internas */
.vip-pagina { max-width: 760px; margin: 0 auto; padding: 22px 16px 48px; }
.vip-pagina > h1 { margin: 6px 0 6px; font-size: 34px; line-height: 1.1; }
.vip-pagina > h1 .ouro { background: linear-gradient(180deg, var(--vip-ouro-claro), var(--vip-ouro) 60%, var(--vip-ouro-escuro));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-pagina > p.intro { margin: 0 0 20px; font-size: 18px; }

/* ---------------------------------------------------------------- gerador */
.ger-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.som { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--vip-linha); background: transparent; color: var(--vip-ouro-claro); font-size: 16px; font-weight: 800; cursor: pointer; min-height: 48px; }
.ger-passo { display: inline-block; margin: 18px 0 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 900;
  letter-spacing: .16em; color: var(--vip-ouro); border: 1px solid var(--vip-linha); }
.ger-tela[hidden] { display: none !important; }
.ger-tela h2 { margin: 8px 0 16px; font-size: 28px; }
.bichos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .bichos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bicho {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 6px 12px; min-height: 104px;
  border-radius: 18px; border: 1px solid var(--vip-linha); background: linear-gradient(180deg, #1b1810, #110f0a);
  color: #fff; cursor: pointer; font: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bicho:hover, .bicho:focus-visible { border-color: var(--vip-ouro); box-shadow: 0 0 0 3px rgba(245, 200, 66, .25); transform: translateY(-2px); }
.bicho-n { position: absolute; top: 7px; left: 10px; font-size: 13px; font-weight: 900; color: var(--vip-ouro); }
.bicho-e { font-size: 38px; line-height: 1.1; }
.bicho-nome { font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.bicho-dz { font-size: 12px; color: var(--vip-suave); letter-spacing: .04em; }
.escolhido { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--vip-card);
  border: 1px solid var(--vip-linha); margin-bottom: 18px; }
.escolhido .bicho-e { font-size: 44px; }
.escolhido strong { display: block; color: #fff; font-size: 22px; }
.escolhido span { color: var(--vip-suave); font-size: 15px; }
.escolhido > div { flex: 1; min-width: 0; }
.escolhido .button { width: auto; min-height: 56px; padding: 8px 18px; font-size: 17px; flex: none; }
.qtds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.qtd { display: grid; justify-items: center; gap: 4px; padding: 20px 6px; border-radius: 20px; border: 2px solid var(--vip-linha);
  background: var(--vip-card); color: #fff; cursor: pointer; font: inherit; }
.qtd:hover, .qtd:focus-visible { border-color: var(--vip-ouro); box-shadow: 0 0 0 3px rgba(245, 200, 66, .25); }
.qtd b { font-size: 46px; line-height: 1; color: var(--vip-ouro); }
.qtd span { font-size: 14px; font-weight: 900; letter-spacing: .12em; }
.soma-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 12px 14px; border-radius: 16px;
  background: rgba(245, 200, 66, .07); border: 1px solid var(--vip-linha); font-size: 16px; color: var(--vip-suave); }
.soma-dia > span { flex-basis: 100%; }
.soma-dia b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #0f0d09;
  border: 1px solid var(--vip-linha); color: var(--vip-ouro-claro); font-size: 18px; }
.palpites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.palpite { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 10px; border-radius: 18px;
  background: linear-gradient(180deg, #1d1910, #100e09); border: 1px solid var(--vip-linha); }
.dig { display: grid; place-items: center; height: 58px; border-radius: 11px; background: #0a0907; border: 1px solid rgba(245, 200, 66, .18);
  font-size: 34px; font-weight: 900; color: var(--vip-ouro-claro); font-variant-numeric: tabular-nums; }
.dig.gira { animation: gira .12s linear infinite; color: #8f8466; }
.dig.travou { animation: travou .45s ease-out; color: var(--vip-ouro-claro); text-shadow: 0 0 14px rgba(245, 200, 66, .6); }
.palpite.pronto { border-color: rgba(245, 200, 66, .6); box-shadow: 0 0 22px rgba(245, 200, 66, .15); }
@keyframes gira { 0% { transform: translateY(-3px); } 50% { transform: translateY(3px); } 100% { transform: translateY(-3px); } }
@keyframes travou { 0% { transform: scale(1.25); background: rgba(245, 200, 66, .35); } 100% { transform: scale(1); } }
.ger-msg { min-height: 28px; margin: 14px 0; text-align: center; font-weight: 800; color: var(--vip-ouro-claro); letter-spacing: .08em; }
.ger-acoes { display: grid; gap: 12px; margin-top: 18px; }
.ger-acoes .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ger-acoes .button { width: 100%; }
.aviso-risco { margin: 20px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--vip-linha); font-size: 15px; text-align: center; }
#confete { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* ---------------------------------------------------------------- trevo do dia */
.trevo-caixa { display: grid; justify-items: center; gap: 14px; padding: 22px 16px 26px; border-radius: 26px; text-align: center;
  background: radial-gradient(circle at 50% 35%, rgba(245, 200, 66, .12), transparent 62%), var(--vip-card); border: 1px solid var(--vip-linha); }
.trevo-svg { width: min(340px, 86vw); height: auto; filter: drop-shadow(0 0 22px rgba(245, 200, 66, .18)); }
.trevo-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 900; fill: url(#ouroTxt); }
.trevo-data { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(245, 200, 66, .6); color: var(--vip-ouro-claro); font-size: 20px; font-weight: 900; letter-spacing: .06em; }
.trevo-milhar { font-size: 20px; color: #fff; }
.trevo-milhar b { color: var(--vip-ouro-claro); font-size: 26px; letter-spacing: .06em; }
.formacoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.formacoes span { padding: 7px 11px; border-radius: 10px; background: #0f0d09; border: 1px solid var(--vip-linha); color: #fff; font-size: 18px;
  font-weight: 800; font-variant-numeric: tabular-nums; }
.trevo-espera { padding: 28px 18px; border-radius: 22px; text-align: center; background: var(--vip-card); border: 1px dashed var(--vip-linha); }
.trevo-espera strong { display: block; color: #fff; font-size: 22px; margin-bottom: 6px; }
.fonte-nota { font-size: 14px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .dig.gira, .dig.travou { animation: none; }
  .bicho, .qtd { transition: none; }
}
.vip .panel > .icon, .vip .panel .icon { background: rgba(245, 200, 66, .12); border: 1px solid var(--vip-linha); color: var(--vip-ouro); }

/* ---------------------------------------------------------------- mesma letra da página de vendas (DESIGN.md §3):
   títulos e números grandes em Anton (só tem peso normal: sem negrito falso), o resto em Albert Sans (vem do estilo.css) */
.vip-titulo, .vip-pagina > h1, .ger-tela h2, .vip-upgrade h2, .qtd b, .dig, .trevo-milhar b, .vip-num {
  font-family: var(--f-titulo); font-weight: 400; font-synthesis: none; letter-spacing: .02em; }
.vip-titulo { font-size: 38px; text-transform: uppercase; }
.vip-pagina > h1 { font-size: 40px; }
.ger-tela h2 { font-size: 32px; }
.vip-upgrade h2 { font-size: 28px; }
.qtd b { font-size: 54px; }
.dig { font-size: 40px; }
.vip-num { font-size: 30px; }
.trevo-svg text { font-family: var(--f-titulo); font-weight: 400; }

/* ---------------------------------------------------------------- Caderno da Vovó */
.cad-titulo { margin: 22px 0 14px; font-size: 32px; }
.bicho[aria-pressed="true"] { border-color: var(--vip-ouro); background: linear-gradient(180deg, rgba(245, 200, 66, .2), rgba(245, 200, 66, .06));
  box-shadow: 0 0 0 3px rgba(245, 200, 66, .3), 0 0 26px rgba(245, 200, 66, .25); }
.cad-res { margin-top: 18px; }
.cad-painel { padding: 18px 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(245, 200, 66, .07), rgba(245, 200, 66, .01)), var(--vip-card);
  border: 1px solid rgba(245, 200, 66, .5); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.cad-painel:focus { outline: none; }
.cad-painel:focus-visible { outline: 3px solid var(--vip-ouro); outline-offset: 4px; }
.cad-painel.surge { animation: cadSurge .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes cadSurge { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cad-painel .escolhido { margin-bottom: 4px; }
.cad-bloco { margin-top: 18px; }
.cad-rotulo { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 900; letter-spacing: .18em; color: var(--vip-ouro); }
.cad-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) { ol.cad-lista { grid-template-columns: 1fr 1fr; } }
.cad-item { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border-radius: 16px; background: #0f0d09; border: 1px solid var(--vip-linha); }
.cad-item .bicho-e { font-size: 34px; line-height: 1; }
.cad-item strong { display: block; color: #fff; font-size: 20px; line-height: 1.2; }
.cad-item small { display: block; color: var(--vip-suave); font-size: 17px; letter-spacing: .02em; }
.cad-painel .escolhido span { font-size: 17px; }
.cad-item.destaque { padding: 14px 16px; border: 2px solid var(--vip-ouro); background: radial-gradient(circle at 0% 50%, rgba(245, 200, 66, .18), transparent 60%), #0f0d09;
  box-shadow: 0 0 26px rgba(245, 200, 66, .18); }
.cad-item.destaque .bicho-e { font-size: 44px; }
.cad-item.destaque strong { font-family: var(--f-titulo); font-weight: 400; font-synthesis: none; font-size: 30px; letter-spacing: .03em; text-transform: uppercase; }
.cad-sem { margin: 0; padding: 14px 16px; border-radius: 16px; border: 1px dashed rgba(245, 200, 66, .55); color: #fff; font-weight: 800; }
.cad-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cad-chips > span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--vip-linha); color: #fff; font-size: 17px; font-weight: 700; }
.cad-painel .ger-acoes { margin-top: 20px; }
.cad-tabelas { margin-top: 34px; }
.cad-colunas { display: grid; gap: 16px; }
@media (min-width: 760px) { .cad-colunas { grid-template-columns: 1fr 1fr; } }
.cad-folha { padding: 18px 16px; border-radius: 22px; background: var(--vip-card); border: 1px solid var(--vip-linha); }
.cad-folha h3 { margin: 0 0 6px; font-family: var(--f-titulo); font-weight: 400; font-synthesis: none; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: var(--vip-ouro); }
.cad-tab { list-style: none; margin: 0; padding: 0; }
.cad-tab li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--vip-linha); color: var(--vip-suave); font-size: 17px; line-height: 1.45; }
.cad-tab li:last-child { border-bottom: 0; }
.cad-tab b { color: #fff; }
.cad-tab em { font-style: normal; color: var(--vip-ouro-claro); font-weight: 700; }
.cad-foto { margin: 18px 0 0; }
.cad-foto img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--vip-linha); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.cad-foto figcaption { margin-top: 10px; text-align: center; color: var(--vip-suave); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .cad-painel.surge { animation: none; } }

/* ---------------------------------------------------------------- aulas em texto e bancas */
.vip .lesson-text h2 { margin: 26px 0 10px; font-family: var(--f-titulo); font-weight: 400; font-synthesis: none; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: var(--vip-ouro); }
.vip .lesson-text h2:first-child { margin-top: 0; }
.vip .lesson-text p { color: var(--vip-texto); font-size: 19px; line-height: 1.65; }
.aula-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.aula-lista li { margin: 0; padding: 12px 14px 12px 40px; position: relative; border-radius: 14px; background: #0f0d09; border: 1px solid var(--vip-linha); color: #fff; font-size: 18px; line-height: 1.45; }
.aula-lista li::before { content: ""; position: absolute; left: 16px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--vip-ouro); box-shadow: 0 0 10px rgba(245, 200, 66, .6); }
.vip .button.banca { justify-content: space-between; text-align: left; width: 100%; padding: 14px 18px; }
.banca > span { display: flex; flex-direction: column; gap: 2px; }
.banca small { font-size: 16px; font-weight: 600; color: var(--vip-suave); }
.selo-rec { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--vip-ouro); color: #1d1505; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }

/* ---------------------------------------------------------------- atalho na tela inicial */
.vip-instalar { width: 100%; margin-top: 16px; }
.bemvindo .vip-instalar { margin-top: 14px; }
.instalar { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 24px 20px; border-radius: 22px;
  border: 1px solid var(--vip-linha); background: var(--vip-card2); color: var(--vip-texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.instalar::backdrop { background: rgba(0, 0, 0, .72); }
.instalar h2 { margin: 0 0 10px; font-size: 26px; }
.instalar p { margin: 0 0 10px; }
.instalar ol { margin: 0 0 14px; padding-left: 22px; font-size: 18px; line-height: 1.5; }
.instalar li { margin: 8px 0; }
.instalar li b { color: var(--vip-ouro-claro); }
.instalar svg { width: 22px; height: 22px; vertical-align: -5px; color: var(--vip-ouro); }
.instalar .button { width: 100%; margin-top: 8px; }