:root {
  --fundo: #050508; --cartao: #110e18; --cartao2: #1a1524; --borda: #3a2554;
  --verde: #3dff2a; --verde-esc: #1fb80f; --roxo: #9d4edd; --roxo-claro: #c77dff; --roxo-esc: #5a189a;
  --rosa: #e040fb; --texto: #f4f1f8; --suave: #a79db5; --vermelho: #ff4d6a; --laranja: #ffa62b;
  --raio: 22px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--fundo); color: var(--texto); font-family: Poppins, system-ui, sans-serif; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- fundo animado ---------- */
#bolhas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body::before { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 0% 30%, rgba(157,78,221,.30), transparent 70%),
    radial-gradient(35% 25% at 100% 5%, rgba(61,255,42,.14), transparent 70%),
    radial-gradient(45% 35% at 100% 90%, rgba(176,38,255,.24), transparent 70%);
  animation: deriva 18s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate(3%, -2%) scale(1.06); } }
#app { position: relative; z-index: 1; min-height: 100vh; }

/* ---------- estrutura ---------- */
.pagina { max-width: 1120px; margin: 0 auto; padding: 0 18px 120px; }
.estreita { max-width: 480px; margin: 0 auto; }
.topo { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); background: rgba(5,5,8,.72); border-bottom: 1px solid rgba(58,37,84,.6); }
.topo .dentro { max-width: 1120px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 14px; }
.topo nav { display: none; gap: 6px; margin-left: 18px; }
.topo nav a { padding: 9px 14px; border-radius: 14px; color: var(--suave); font-weight: 500; transition: .2s; }
.topo nav a:hover { color: var(--texto); background: rgba(157,78,221,.12); }
.topo nav a.ativo { color: #e6c8ff; background: linear-gradient(#7b2cbfbf, #3c096cbf); box-shadow: 0 0 18px rgba(157,78,221,.45); }
.cresce { flex: 1; }
.marca { display: flex; align-items: center; gap: 6px; }
.marca img { width: 54px; height: 40px; object-fit: contain; }
.marca .nome { font-weight: 800; font-style: italic; font-size: 21px; letter-spacing: -1px; line-height: 1; }
.marca .nome b { background: linear-gradient(90deg, #b45cff, var(--rosa)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca small { display: block; font-size: 11px; text-align: center; color: var(--texto); letter-spacing: .5px; }
.redondo { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--cartao2); border: 1px solid var(--borda); transition: .2s; }
.redondo:hover { border-color: var(--roxo-claro); box-shadow: 0 0 16px rgba(157,78,221,.4); }
.ponto { position: absolute; top: 8px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: #ff2d55; animation: pulsa 1.6s ease-in-out infinite; }
.sino.tem svg { animation: abana 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes abana { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(6deg); } }
@keyframes pulsa { 50% { transform: scale(1.35); opacity: .7; } }

.barra { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 6; display: flex; padding: 8px; gap: 4px;
  border-radius: 26px; background: rgba(20,16,25,.94); border: 1px solid var(--borda); backdrop-filter: blur(14px); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.barra a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 18px; font-size: 11px; text-align: center; line-height: 1.15; transition: .25s; border: 1px solid transparent; }
.barra a.ativo { color: #e6c8ff; background: linear-gradient(#7b2cbfbf, #3c096cbf); border-color: var(--roxo-claro); box-shadow: 0 0 18px rgba(157,78,221,.5); }
.barra a.ativo svg { transform: scale(1.12); }
@media (min-width: 900px) {
  .topo nav { display: flex; }
  .barra { display: none; }
  .pagina { padding-bottom: 60px; }
}

/* ---------- componentes ---------- */
.titulo { font-size: 26px; font-weight: 700; margin: 18px 0 6px; }
.subtitulo { color: var(--suave); margin: 0 0 14px; }
.secao { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.secao h2 { margin: 0; font-size: 20px; flex: 1; }
.secao svg { color: var(--roxo-claro); width: 26px; height: 26px; }
.secao a { color: var(--roxo-claro); font-size: 15px; }
.cartao { position: relative; background: linear-gradient(rgba(26,21,36,.95), rgba(17,14,24,.95)); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; transition: transform .2s, border-color .2s, box-shadow .2s; }
a.cartao:hover, button.cartao:hover, .cartao.clica:hover { transform: translateY(-3px); border-color: var(--roxo-claro); box-shadow: 0 10px 30px rgba(157,78,221,.25); }
.brilho { animation: brilho 2.6s ease-in-out infinite; }
.brilho.verde { border-color: var(--verde); --cor-brilho: rgba(61,255,42,.45); }
.brilho.roxo { border-color: var(--roxo-claro); --cor-brilho: rgba(199,125,255,.5); }
@keyframes brilho { 0%, 100% { box-shadow: 0 0 10px var(--cor-brilho, rgba(157,78,221,.35)); } 50% { box-shadow: 0 0 30px var(--cor-brilho, rgba(157,78,221,.6)); } }
.grade { display: grid; gap: 12px; }
@media (min-width: 700px) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } }

.botao { position: relative; overflow: hidden; width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; font-size: 19px; font-weight: 700; color: #041004; background: linear-gradient(#6bff4f, var(--verde-esc));
  box-shadow: 0 0 18px rgba(61,255,42,.45); animation: brilhoBotao 2.4s ease-in-out infinite; transition: transform .12s; }
.botao.roxo { color: #fff; background: linear-gradient(#b45cff, var(--roxo-esc)); box-shadow: 0 0 18px rgba(157,78,221,.55); animation-name: brilhoRoxo; }
.botao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: reflexo 3.2s ease-in-out infinite; }
.botao:active { transform: scale(.96); }
.botao:disabled { filter: grayscale(1) brightness(.5); animation: none; cursor: not-allowed; }
.botao .fim { position: absolute; right: 22px; }
@keyframes brilhoBotao { 50% { box-shadow: 0 0 34px rgba(61,255,42,.65); } }
@keyframes brilhoRoxo { 50% { box-shadow: 0 0 34px rgba(199,125,255,.7); } }
@keyframes reflexo { 60%, 100% { transform: translateX(120%); } }
.contorno { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 1.5px solid var(--roxo); font-weight: 500; transition: .2s; }
.contorno:hover { background: rgba(157,78,221,.15); box-shadow: 0 0 16px rgba(157,78,221,.35); }
.contorno.verde { border-color: var(--verde); }
.girar { width: 22px; height: 22px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.campo { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; border-radius: 18px; border: 1.5px solid rgba(157,78,221,.55); background: rgba(17,14,24,.85); transition: .2s; margin-bottom: 12px; }
.campo:focus-within { border-color: var(--roxo-claro); box-shadow: 0 0 18px rgba(157,78,221,.35); }
.campo svg { color: var(--roxo-claro); }
.campo input, .campo textarea { flex: 1; background: none; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: 17px; padding: 16px 0; min-width: 0; }
.campo input::placeholder { color: var(--suave); }
.erro { color: var(--vermelho); text-align: center; margin: 8px 0; min-height: 1em; }
.etiqueta { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid currentColor; }
.e-activa { color: var(--verde); background: rgba(61,255,42,.12); }
.e-aexpirar { color: var(--laranja); background: rgba(255,166,43,.12); }
.e-expirada, .e-falhou { color: var(--vermelho); background: rgba(255,77,106,.12); }
.e-pago { color: var(--verde); background: rgba(61,255,42,.12); }
.e-pendente { color: var(--laranja); background: rgba(255,166,43,.12); }
.e-roxo { color: #fff; background: var(--roxo); border-color: var(--roxo); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.chip { white-space: nowrap; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); transition: .2s; }
.chip.ativo { background: linear-gradient(#b45cff, var(--roxo-esc)); border-color: var(--roxo-claro); font-weight: 700; color: #fff; }

.icone-s { width: 56px; height: 56px; border-radius: 26%; object-fit: cover; flex: none; }
.icone-l { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; }

/* entrada animada */
.surgir { opacity: 0; animation: surgir .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes surgir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---------- entrar / criar conta ---------- */
.entrada { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 22px 40px; text-align: center; }
.logo-grande img { width: 190px; height: 138px; object-fit: contain; margin: 0 auto; animation: flutua 5s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-8px); filter: drop-shadow(0 0 26px rgba(176,38,255,.6)); } }
.logo-grande .nome { font-size: 46px; font-weight: 800; font-style: italic; letter-spacing: -2px; line-height: 1; }
.logo-grande .nome b { color: var(--verde); }
.logo-grande .sub { font-size: 22px; font-weight: 700; font-style: italic; display: flex; align-items: center; justify-content: center; gap: 12px; }
.logo-grande .sub::before, .logo-grande .sub::after { content: ""; width: 36px; height: 3px; border-radius: 3px; background: var(--verde); }
.fila { display: flex; gap: 10px; justify-content: center; margin: 18px 0 24px; }
.fila .icone-s { width: 54px; height: 54px; animation: flutua 4s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
.link-verde { color: var(--verde); font-weight: 600; }
.link-verde.sub { text-decoration: underline; }

/* ---------- início ---------- */
.ola { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 800; flex: none;
  background: linear-gradient(#3a1a5c, #14091f); box-shadow: 0 0 0 3px var(--roxo), 0 0 22px rgba(224,64,251,.5); animation: brilho 2.6s infinite; }
.ola h1 { margin: 0; font-size: 25px; }
.ola p { margin: 0; color: var(--suave); font-size: 14px; }
.ativo-selo { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; color: var(--verde); background: #0e3a12; border: 1px solid var(--verde); font-size: 13px; font-weight: 600; white-space: nowrap; }
.carrossel { position: relative; height: 190px; border-radius: 24px; overflow: hidden; border: 1.5px solid var(--roxo-claro); box-shadow: 0 0 24px rgba(157,78,221,.35); }
.slide { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(110deg, #2a0f48, #5b1f9e 55%, #1a0830); opacity: 0; transition: opacity .8s; }
.slide.ativo { opacity: 1; }
.slide img.fundo { position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); animation: zoom 9s ease-in-out infinite alternate; }
@keyframes zoom { to { transform: scale(1.08); } }
.slide .txt { position: relative; padding: 20px; max-width: 64%; }
.slide h3 { margin: 0; font-size: clamp(19px, 3vw, 28px); line-height: 1.2; }
.slide p { margin: 6px 0 0; color: var(--texto); font-size: 14px; }
.slide .mini { display: flex; gap: 6px; margin-top: 12px; }
.slide .mini img { width: 32px; height: 32px; border-radius: 9px; }
.carrossel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(-100%); animation: reflexo 5s ease-in-out infinite; pointer-events: none; }
.pontos { display: flex; justify-content: center; gap: 8px; margin: 10px 0 0; }
.pontos i { width: 9px; height: 9px; border-radius: 9px; background: var(--borda); transition: .3s; cursor: pointer; }
.pontos i.ativo { width: 24px; background: linear-gradient(90deg, var(--rosa), var(--roxo)); }

.meu-plano { display: flex; align-items: center; gap: 12px; }
.meu-plano .info { flex: 1; min-width: 0; }
.meu-plano h3 { margin: 0 0 4px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meu-plano p { margin: 4px 0; font-size: 14px; }
.barrinha { height: 6px; border-radius: 6px; background: #2e2440; overflow: hidden; }
.barrinha i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--roxo), var(--rosa)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.anel { position: relative; width: 84px; height: 84px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .arco { transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(224,64,251,.7)); }
.anel .n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.anel .n b { font-size: 26px; }
.anel .n small { font-size: 10px; }

.mosaicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (min-width: 700px) { .mosaicos { grid-template-columns: repeat(8, 1fr); } }
.mosaico { height: 100px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--c); background: linear-gradient(color-mix(in srgb, var(--c) 28%, transparent), #0e0a16); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform .2s, box-shadow .2s; }
.mosaico:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 60%, transparent); }
.mosaico .icone-s { width: 46px; height: 46px; }
.mosaico span { max-width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }

/* ---------- planos / pacote ---------- */
.servico-linha { display: flex; align-items: center; gap: 14px; }
.servico-linha .info { flex: 1; }
.servico-linha h3 { margin: 0; font-size: 18px; }
.servico-linha p { margin: 2px 0; color: var(--suave); font-size: 14px; }
.verde-t { color: var(--verde); font-weight: 600; }
.cabecalho { position: relative; height: 180px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--roxo); display: flex; align-items: center; padding: 18px; gap: 16px;
  background: linear-gradient(90deg, #0c0a10, color-mix(in srgb, var(--c) 45%, #0c0a10)); }
.cabecalho img.fundo { position: absolute; right: 0; top: 0; height: 100%; width: 70%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.cabecalho > * { position: relative; }
.cabecalho h1 { margin: 0; font-size: 32px; font-weight: 800; }
.cabecalho p { margin: 4px 0 0; }
.cabecalho .icone-s { width: 80px; height: 80px; }
.plano-op { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; }
.plano-op.sel { border-color: var(--verde); box-shadow: 0 0 22px rgba(61,255,42,.3); }
.plano-op .info { flex: 1; }
.plano-op h3 { margin: 0; font-size: 17px; }
.plano-op p { margin: 2px 0; color: var(--suave); font-size: 14px; }
.radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--suave); display: grid; place-items: center; }
.sel .radio { border-color: var(--verde); }
.sel .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); }
.preco { font-size: 34px; font-weight: 800; }
.beneficio { display: flex; align-items: center; gap: 10px; padding: 12px; }
.beneficio svg { color: var(--roxo-claro); width: 28px; height: 28px; }
.beneficio b { display: block; font-size: 15px; }
.beneficio small { color: var(--suave); }
.resumo { display: flex; gap: 14px; align-items: center; }
.resumo dl { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.resumo dt { color: var(--suave); }
.resumo dd { margin: 0; font-weight: 600; }
.resumo img { width: 140px; height: 110px; object-fit: cover; border-radius: 16px; border: 1px solid var(--roxo); }
.fixo-baixo { position: sticky; bottom: 92px; margin-top: 18px; z-index: 3; }
@media (min-width: 900px) { .fixo-baixo { bottom: 16px; } }
.metodo { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.metodo.sel { border-color: var(--verde); }
.metodo .logo-m { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.metodo.off { opacity: .55; cursor: not-allowed; }
.info-caixa { display: flex; gap: 10px; color: var(--suave); font-size: 14px; }
.info-caixa svg { color: var(--roxo-claro); }

/* ---------- processamento ---------- */
.estado-pag { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.radar { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.radar::before, .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--verde); animation: onda 2s ease-out infinite; }
.radar::after { animation-delay: 1s; }
@keyframes onda { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.radar svg { width: 60px; height: 60px; color: var(--verde); }
.grande-ok { width: 130px; height: 130px; color: var(--verde); filter: drop-shadow(0 0 22px rgba(61,255,42,.7)); animation: aparece .6s cubic-bezier(.2,1.6,.4,1); }
.grande-x { width: 130px; height: 130px; color: var(--vermelho); animation: aparece .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes aparece { from { transform: scale(.2); opacity: 0; } }

/* ---------- listas ---------- */
.notif { display: flex; gap: 12px; align-items: center; }
.notif.urgente { background: linear-gradient(90deg, #4a0e1e, #2a0a14); border-color: var(--vermelho); }
.notif .info { flex: 1; }
.notif h3 { margin: 0; font-size: 16px; }
.notif p { margin: 3px 0; color: var(--suave); font-size: 14px; }
.notif time { color: var(--suave); font-size: 12px; }
.icone-n { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(157,78,221,.2); color: var(--roxo-claro); }
.nao-lida { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex: none; }
.acesso { font-family: ui-monospace, monospace; font-size: 16px; word-break: break-all; padding: 14px; border-radius: 14px; background: rgba(5,5,8,.6); border: 1px dashed var(--verde); }
.vazio { text-align: center; color: var(--suave); padding: 30px 10px; }
.carregar { display: grid; place-items: center; padding: 40px; color: var(--verde); }
.carregar .girar { width: 40px; height: 40px; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--borda); margin-bottom: 10px; text-align: left; transition: .2s; }
.menu-item:hover { border-color: var(--roxo-claro); }
.menu-item svg:first-child { color: var(--roxo-claro); }
.menu-item span { flex: 1; }

#aviso { position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 30px); opacity: 0; z-index: 20; padding: 12px 20px; border-radius: 14px;
  background: var(--cartao2); border: 1px solid var(--roxo-claro); box-shadow: 0 0 22px rgba(157,78,221,.5); transition: .3s; pointer-events: none; max-width: 90vw; text-align: center; }
#aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.modal-fundo { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 18px; animation: surgir .3s; }
.modal { max-width: 520px; max-height: 80vh; overflow: auto; }
.modal pre { white-space: pre-wrap; font-family: inherit; font-size: 14px; color: var(--texto); }