/* Portal publico: landing, login e cadastro (React dentro do Django).
   Origem: maquete de 02/11/2026 (C:/bns-arquivo/landing-react-maquete).
   Doc: docs/ucp/landing.md. Escopo: so as paginas com <body class="portal">. */
:root {
  --bg: #0a0b0f;
  --bg2: #101219;
  --bg3: #161923;
  --ink: #f4f1e8;
  --mute: rgba(244, 241, 232, 0.66);
  --dim: rgba(244, 241, 232, 0.42);
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.16);
  --ok: #3ddc84;
  --accent: #ff5a06;
  --amber: #ffb02e;
  --pink: #ff3d8b;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Archivo Black", "Plus Jakarta Sans", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.grad { background: linear-gradient(100deg, var(--amber), var(--accent) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; }
h2 { font-size: clamp(30px, 4.4vw, 52px); }
.lead { color: var(--mute); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; margin: 16px 0 0; }

/* Botoes */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; overflow: hidden; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: linear-gradient(180deg, #ff6d1f, var(--accent)); color: #fff; box-shadow: 0 10px 30px -10px rgba(255, 90, 6, .7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--solid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: brilho 3.6s ease-in-out infinite; }
.btn--ghost { background: rgba(255,255,255,.05); border-color: var(--line2); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: rgba(255,90,6,.6); background: rgba(255,90,6,.08); }
.btn--full { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
@keyframes brilho { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.cartao { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--line); border-radius: 20px; }
.borda-brasa { border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(120deg, var(--amber), var(--accent), var(--pink)) border-box; }

.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(10,11,15,.55); backdrop-filter: blur(10px); font-size: 14px; font-weight: 600; }
.pill code { font-family: ui-monospace, Consolas, monospace; color: var(--mute); font-size: 13px; }
.pill button { border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 800; cursor: pointer; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

/* Entrada ao rolar */
.js .surge { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .surge.visto { opacity: 1; transform: none; }

/* Topo */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.topo.rolou { background: rgba(10,11,15,.78); backdrop-filter: blur(14px); border-color: var(--line); }
.topo__in { display: flex; align-items: center; gap: 28px; height: 72px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 17px; }
.marca img { height: 34px; width: auto; }
.menu { display: none; gap: 4px; margin-left: 8px; }
.menu a { padding: 8px 12px; border-radius: 10px; color: var(--mute); font-weight: 600; font-size: 14px; transition: color .2s, background .2s; }
.menu a:hover, .menu a.ativo { color: var(--ink); background: rgba(255,255,255,.06); }
.topo__acoes { margin-left: auto; display: flex; gap: 8px; }
.topo__acoes .btn { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.topo__acoes .btn--ghost { display: none; }
@media (min-width: 960px) { .menu { display: flex; } .topo__acoes .btn--ghost { display: inline-flex; } }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: 110px 0 70px; overflow: hidden; isolation: isolate; }
.hero__fundo { position: absolute; inset: -4%; z-index: -3; background: url("../img/login/fundo-retrato.webp") center bottom / cover no-repeat; animation: zoom 26s ease-in-out infinite alternate; }
@media (min-width: 768px) { .hero__fundo { background-image: url("../img/login/fundo-paisagem.webp"); } }
@keyframes zoom { to { transform: scale(1.08) translate(-1%, -1%); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 70% at 75% 40%, rgba(255,90,6,.18), transparent 70%), linear-gradient(90deg, rgba(10,11,15,.94) 0%, rgba(10,11,15,.72) 45%, rgba(10,11,15,.35) 100%), linear-gradient(180deg, rgba(10,11,15,.4), transparent 30%, transparent 70%, var(--bg)); }
.brasas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero__grade { grid-template-columns: 1.15fr .85fr; } }
.selo { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,90,6,.12); border: 1px solid rgba(255,90,6,.35); font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.selo b { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hero__titulo { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.01em; font-size: clamp(46px, 8vw, 104px); line-height: .92; }
.hero__titulo span { display: block; }
.hero .lead { max-width: 560px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__acoes .btn { min-height: 56px; padding: 0 28px; font-size: 16px; }
.hero__status { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.apk { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 14px; border: 1px dashed rgba(61,220,132,.5); background: rgba(61,220,132,.07); font-weight: 700; font-size: 14px; }
.apk svg { width: 26px; height: 26px; color: var(--ok); }
.apk small { display: block; color: var(--mute); font-weight: 500; font-size: 12px; }
.apk__seta { animation: desce 1.4s ease-in-out infinite; }
@keyframes desce { 50% { transform: translateY(3px); } }

.palco-logo { position: relative; display: none; justify-self: center; width: min(440px, 100%); aspect-ratio: 1; }
@media (min-width: 960px) { .palco-logo { display: block; } }
.palco-logo__aro { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(255,90,6,.25); animation: gira 40s linear infinite; }
.palco-logo__aro::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.palco-logo__aro--2 { inset: 18%; border-style: dashed; border-color: rgba(255,61,139,.22); animation-duration: 28s; animation-direction: reverse; }
.palco-logo__aro--2::before { background: var(--pink); box-shadow: 0 0 18px var(--pink); }
@keyframes gira { to { transform: rotate(360deg); } }
.palco-logo img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(255,61,139,.35)); animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-14px) rotate(-1.5deg); } }
.aviso { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(16,18,25,.82); border: 1px solid var(--line2); backdrop-filter: blur(12px); font-size: 13px; font-weight: 600; box-shadow: 0 20px 40px -20px #000; animation: flutua 7s ease-in-out infinite; }
.aviso small { display: block; color: var(--mute); font-weight: 500; font-size: 11px; }
.aviso__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,90,6,.16); color: var(--accent); }
.aviso__ico svg { width: 17px; height: 17px; }
.aviso--1 { top: 10%; left: -6%; }
.aviso--2 { bottom: 14%; right: -8%; animation-delay: -3s; }
.aviso--2 .aviso__ico { background: rgba(61,220,132,.14); color: var(--ok); }

.numeros { position: relative; z-index: 2; margin-top: -40px; }
.numeros__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border-radius: 20px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 768px) { .numeros__grade { grid-template-columns: repeat(4, 1fr); } }
.numero { padding: 22px 22px; background: var(--bg2); }
.numero strong { display: block; font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 400; }
.numero span { color: var(--mute); font-size: 13px; }

section.bloco { padding: clamp(56px, 7vw, 96px) 0; position: relative; }

/* Onde jogar */
.jogar { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 900px) { .jogar { grid-template-columns: 1.3fr 1fr; } }
.jogar .cartao { padding: 28px; overflow: hidden; position: relative; }
.jogar h3 { font-size: 26px; margin-bottom: 8px; }
.jogar p { color: var(--mute); line-height: 1.6; margin: 0 0 20px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 700; color: var(--mute); margin-bottom: 14px; }
.tag svg, .link svg { width: 16px; height: 16px; flex: none; }
.tag { white-space: nowrap; }
.celular { margin-top: 22px; border-radius: 22px; padding: 8px; background: #05060a; border: 1px solid var(--line2); box-shadow: 0 30px 60px -30px rgba(255,90,6,.5); transform: perspective(1200px) rotateX(8deg); transition: transform .5s; }
.jogar .cartao:hover .celular { transform: perspective(1200px) rotateX(0); }
.celular img { border-radius: 15px; width: 100%; }
.passos { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.passos li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 14px; }
.passos b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,90,6,.15); color: var(--accent); font-size: 13px; }

/* Criadores */
.criadores { overflow: hidden; background: radial-gradient(60% 50% at 70% 40%, rgba(255,90,6,.09), transparent 70%), var(--bg); }
.criadores::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 60% 45%, #000, transparent 75%); pointer-events: none; }
.criadores__grade { display: grid; gap: 30px; align-items: center; position: relative; }
@media (min-width: 960px) { .criadores__grade { grid-template-columns: .9fr 1.1fr; } }
.criadores h2 { font-size: clamp(30px, 3.8vw, 48px); }
.constelacao .ficha { bottom: -10px; }
.digita { display: block; min-height: 1.05em; }
.cursor { display: inline-block; width: 4px; height: .82em; margin-left: 6px; vertical-align: -.04em; background: var(--accent); border-radius: 2px; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.vantagens { list-style: none; padding: 0; margin: 26px 0 28px; display: grid; gap: 10px; }
.vantagens li { display: flex; gap: 12px; align-items: center; color: var(--mute); font-size: 15px; }
.vantagens li svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.vantagens strong { color: var(--ink); }

.constelacao { position: relative; height: clamp(420px, 56vw, 600px); }
.constelacao canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nucleo { position: absolute; left: 50%; top: 46%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,90,6,.3), rgba(10,11,15,.9) 70%); border: 1px solid rgba(255,90,6,.45); box-shadow: 0 0 80px rgba(255,90,6,.35); }
.nucleo img { width: 58px; height: 92px; object-fit: contain; animation: flutua 6s ease-in-out infinite; }
.nucleo::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(255,90,6,.3); animation: onda 3s ease-out infinite; }
@keyframes onda { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.astro { position: absolute; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 0; padding: 0; background: none; cursor: pointer; will-change: transform; }
.astro__foto { width: 100%; height: 100%; border-radius: 50%; padding: 4px; background: linear-gradient(140deg, var(--amber), var(--accent), var(--pink)); box-shadow: 0 10px 40px -8px rgba(255,90,6,.65); transition: box-shadow .3s; }
.astro__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); background: var(--bg3); }
.astro.ativo .astro__foto { box-shadow: 0 0 0 4px rgba(255,90,6,.25), 0 0 60px rgba(255,90,6,.9); }
.astro__nome { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: rgba(10,11,15,.85); border: 1px solid var(--line2); font-size: 12px; font-weight: 700; }
.astro__vivo { position: absolute; right: -2px; top: 2px; padding: 2px 7px; border-radius: 6px; background: #e3262b; font-size: 10px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 0 0 3px var(--bg); }

.ficha { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(420px, 100%); display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(16,18,25,.88); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px #000; }
.ficha img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.ficha__txt { min-width: 0; flex: 1; }
.ficha__txt strong { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.ficha__txt strong svg { width: 16px; height: 16px; color: var(--accent); }
.ficha__txt span { color: var(--mute); font-size: 13px; }
.ficha .btn { min-height: 42px; padding: 0 16px; font-size: 13px; }
.ficha-troca { animation: troca .45s cubic-bezier(.2,.7,.2,1); }
@keyframes troca { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.esteira { position: relative; margin-top: 56px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.esteira__trilho { display: flex; gap: 16px; width: max-content; animation: esteira 40s linear infinite; }
.esteira:hover .esteira__trilho { animation-play-state: paused; }
@keyframes esteira { to { transform: translateX(-50%); } }
.video { position: relative; width: 300px; flex: none; border-radius: 16px; overflow: hidden; background: var(--bg3); border: 1px solid var(--line); transition: transform .3s, border-color .3s; }
.video:hover { transform: translateY(-4px); border-color: rgba(255,90,6,.6); }
.video__capa { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.video__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.video:hover .video__capa img { transform: scale(1.06); }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7)); }
.video__play span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,90,6,.92); box-shadow: 0 0 30px rgba(255,90,6,.6); }
.video__play svg { width: 18px; height: 18px; margin-left: 2px; }
.video__info { display: flex; gap: 10px; padding: 12px; }
.video__info img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.video__info strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; }
.video__info span { color: var(--dim); font-size: 12px; }

/* Eventos */
.eventos { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 900px) { .eventos { grid-template-columns: repeat(3, 1fr); } }
.evento { display: flex; gap: 16px; padding: 18px; transition: transform .3s, border-color .3s; }
.evento:hover { transform: translateY(-4px); border-color: rgba(255,90,6,.5); }
.evento__data { flex: none; width: 64px; padding: 10px 0; border-radius: 14px; text-align: center; background: rgba(255,90,6,.12); border: 1px solid rgba(255,90,6,.3); }
.evento__data b { display: block; font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1; }
.evento__data span { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--accent); }
.evento h3 { font-family: var(--font); font-weight: 800; font-size: 17px; margin: 2px 0 6px; line-height: 1.3; }
.evento p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.5; }
.evento__agora { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--ok); }

/* Bento */
.bento { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) { .bento { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; } .bento__mapa { grid-row: span 2; } }
.bento .cartao { position: relative; padding: 26px; overflow: hidden; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; }
.bento h3 { font-family: var(--font); font-weight: 800; font-size: 22px; margin-bottom: 8px; line-height: 1.25; }
.bento .tag { align-self: flex-start; }
.bento p { color: var(--mute); margin: 0 0 16px; line-height: 1.55; font-size: 14px; }
.bento .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--accent); font-size: 14px; }
.bento__mapa { min-height: 440px !important; background: linear-gradient(180deg, transparent 20%, rgba(10,11,15,.95) 85%), url("../img/login/fundo-paisagem.webp") center / cover; }
.radar { position: absolute; top: 34px; right: 34px; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(255,90,6,.45); background: radial-gradient(circle, rgba(255,90,6,.12), transparent 70%); overflow: hidden; }
.radar::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(255,90,6,.5), transparent 25%); animation: gira 4s linear infinite; }
.radar i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.familias { display: flex; margin-bottom: 18px; }
.familias span { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 12px; font-family: var(--display); font-size: 15px; border: 3px solid var(--bg2); }
.familias span:first-child { margin-left: 0; }

/* Duvidas */
.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 10px; }
.faq details { padding: 0 20px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.faq details[open] { border-color: rgba(255,90,6,.4); background: rgba(255,90,6,.05); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); font-style: normal; transition: transform .3s; }
.faq details[open] summary i { transform: rotate(45deg); color: var(--accent); }
.faq p { margin: 0 0 18px; color: var(--mute); line-height: 1.6; }

.chamada { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 64px); border-radius: 28px; text-align: center; background: radial-gradient(80% 120% at 50% 0%, rgba(255,90,6,.35), transparent 60%), var(--bg2); border: 1px solid rgba(255,90,6,.3); }
.chamada .hero__acoes { justify-content: center; }
.rodape { padding: 40px 0 50px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.rodape__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.rodape nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Telas de conta (login e cadastro) */
.conta { display: grid; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 1000px) { .conta { grid-template-columns: 1.1fr .9fr; } }
.conta__arte { position: relative; display: none; overflow: hidden; isolation: isolate; padding: 40px 48px; flex-direction: column; justify-content: space-between; }
@media (min-width: 1000px) { .conta__arte { display: flex; } }
.conta__arte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 30% 70%, rgba(255,90,6,.25), transparent 70%), linear-gradient(180deg, rgba(10,11,15,.5), rgba(10,11,15,.2) 40%, rgba(10,11,15,.92)); }
.conta__arte h2 { font-size: clamp(38px, 4.2vw, 60px); max-width: 560px; }
.conta__arte .lead { max-width: 480px; }
.conta__lado { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 96px 16px 40px; background: radial-gradient(70% 50% at 50% 0%, rgba(255,90,6,.12), transparent 70%), var(--bg); }
@media (min-width: 600px) { .conta__lado { padding: 96px 48px 48px; } }
.conta__topo { position: absolute; top: 20px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
@media (min-width: 600px) { .conta__topo { left: 48px; right: 48px; } }
.conta__topo a.voltar { display: inline-flex; gap: 6px; align-items: center; color: var(--mute); font-size: 14px; font-weight: 600; }
.conta__topo svg { width: 16px; height: 16px; }
.form { width: min(440px, 100%); margin-inline: auto; }
.form h1 { font-size: clamp(30px, 4vw, 40px); }
.form > p.lead { margin: 10px 0 28px; font-size: 15px; }
.campo { display: grid; gap: 8px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 700; color: var(--mute); display: flex; justify-content: space-between; }
.campo label a { color: var(--accent); }
.entrada { position: relative; display: flex; align-items: center; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line2); transition: border-color .2s, box-shadow .2s, background .2s; }
.entrada:focus-within { border-color: var(--accent); background: rgba(255,90,6,.05); box-shadow: 0 0 0 4px rgba(255,90,6,.16); }
.entrada > svg { width: 18px; height: 18px; margin-left: 14px; color: var(--dim); flex: none; }
.entrada:focus-within > svg { color: var(--accent); }
.entrada input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.entrada input::placeholder { color: var(--dim); }
.entrada .olho { border: 0; background: none; padding: 0 14px; height: 52px; cursor: pointer; color: var(--dim); display: grid; place-items: center; }
.entrada .olho svg { width: 18px; height: 18px; }
.entrada .ok { margin-right: 14px; color: var(--ok); }
.ajuda { font-size: 12px; color: var(--dim); }
.ajuda.ok { color: var(--ok); }
.linha { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 22px; font-size: 14px; color: var(--mute); }
.check { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); display: grid; place-items: center; cursor: pointer; flex: none; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.ou { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pe { margin-top: 26px; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.6; }
.pe a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }

.ticker { display: grid; gap: 10px; max-width: 460px; }
.ticker .aviso { position: static; animation: none; }
.ticker__item { animation: entra .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes entra { from { opacity: 0; transform: translateX(-20px); } }
.mini-criadores { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.mini-criadores__fotos { display: flex; }
.mini-criadores__fotos img { width: 40px; height: 40px; border-radius: 50%; margin-left: -10px; border: 3px solid var(--bg); object-fit: cover; }
.mini-criadores__fotos img:first-child { margin-left: 0; }
.mini-criadores span { font-size: 13px; color: var(--mute); }
.mini-criadores strong { color: var(--ink); }

.passador { display: flex; gap: 8px; margin: 0 0 26px; }
.passador__item { flex: 1; }
.passador__barra { height: 4px; border-radius: 4px; background: var(--line2); overflow: hidden; }
.passador__barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--accent)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.passador__item.feito i { width: 100%; }
.passador__item span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--dim); }
.passador__item.feito span { color: var(--ink); }
.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.escolha { position: relative; padding: 12px 12px 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line2); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.escolha:hover { transform: translateY(-2px); }
.escolha.marcada { border-color: var(--accent); background: rgba(255,90,6,.08); box-shadow: 0 0 0 4px rgba(255,90,6,.14); }
.escolha__skin { height: 150px; border-radius: 12px; display: grid; place-items: end center; overflow: hidden; background: radial-gradient(circle at 50% 80%, rgba(255,90,6,.28), transparent 60%), rgba(255,255,255,.03); }
.escolha__skin img { height: 140px; width: auto; transition: transform .4s; }
.escolha.marcada .escolha__skin img { transform: scale(1.06); }
.escolha strong { display: block; margin-top: 10px; font-size: 14px; }
.escolha small { color: var(--dim); font-size: 12px; }
.escolha__marca { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; }
.escolha.marcada .escolha__marca { background: var(--accent); border-color: var(--accent); }
.escolha.marcada .escolha__marca::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.forca { display: flex; gap: 6px; margin-top: 4px; }
.forca i { flex: 1; height: 4px; border-radius: 4px; background: var(--line2); }
.forca i.on { background: var(--amber); }
.forca.boa i.on { background: var(--ok); }
.tipos { display: grid; gap: 12px; margin-bottom: 18px; }
.tipo { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line2); cursor: pointer; text-align: left; }
.tipo.marcada { border-color: var(--accent); background: rgba(255,90,6,.08); box-shadow: 0 0 0 4px rgba(255,90,6,.14); }
.tipo__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.06); flex: none; }
.tipo__ico svg { width: 22px; height: 22px; }
.tipo.beta .tipo__ico { background: linear-gradient(140deg, var(--amber), var(--accent), var(--pink)); }
.tipo strong { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.tipo strong em { font-style: normal; padding: 2px 8px; border-radius: 6px; background: rgba(255,90,6,.18); color: var(--amber); font-size: 11px; font-weight: 800; }
.tipo p { margin: 4px 0 0; color: var(--mute); font-size: 13px; line-height: 1.5; }
.botoes-passo { display: flex; gap: 10px; margin-top: 8px; }
.botoes-passo .btn--ghost { flex: none; }
.lista-espera { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; max-width: 460px; }
.lista-espera li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(10,11,15,.6); border: 1px solid var(--line2); backdrop-filter: blur(10px); font-size: 14px; animation: entra .6s cubic-bezier(.2,.7,.2,1) both; }
.lista-espera li:nth-child(2) { animation-delay: .12s; } .lista-espera li:nth-child(3) { animation-delay: .24s; } .lista-espera li:nth-child(4) { animation-delay: .36s; }
.lista-espera li .aviso__ico { flex: none; }
.lista-espera small { display: block; color: var(--mute); font-size: 12px; }
.troca-passo { animation: troca .45s cubic-bezier(.2,.7,.2,1); }

/* ---- Ajustes da rodada 2 ---- */
section[id] { scroll-margin-top: 64px; }
.hero { flex-direction: column; align-items: stretch; justify-content: center; padding: 92px 0 24px; }
.hero > .wrap.hero__grade { flex: 1; align-content: center; }
.hero__titulo { font-size: clamp(40px, 5.4vw, 74px); line-height: 1; }
.hero__titulo span { display: inline; }
.hero .numeros { margin-top: 28px; }
.numeros__grade { background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.numero { background: rgba(16,18,25,.72); padding: 16px 20px; }

.palco-pers { position: relative; height: 340px; }
@media (min-width: 960px) { .palco-pers { height: min(560px, 64vh); } }
.palco-pers__aro { position: absolute; left: 50%; top: 48%; width: min(440px, 90%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,61,139,.2), rgba(255,90,6,.08) 45%, transparent 68%); }
.palco-pers__aro::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(255,176,46,.28); animation: gira 50s linear infinite; }
.palco-pers__chao { position: absolute; left: 50%; bottom: 9%; width: 62%; height: 46px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,90,6,.55), transparent); filter: blur(3px); }
.pers { position: absolute; left: 50%; bottom: 11%; height: 76%; transform: translateX(-50%); }
.pers img { height: 100%; width: auto; filter: drop-shadow(0 24px 28px rgba(0,0,0,.65)); }
.pers.entra { animation: persEntra .9s cubic-bezier(.2,.7,.2,1) both; }
.pers.sai { animation: persSai .65s cubic-bezier(.5,0,.8,.4) both; }
.pers.entra img { animation: passo .3s ease-in-out 3 alternate; }
@keyframes persEntra { from { opacity: 0; transform: translateX(60%); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes persSai { from { opacity: 1; transform: translateX(-50%); } to { opacity: 0; transform: translateX(-160%); } }
@keyframes passo { to { transform: translateY(-6px); } }
.balao { position: absolute; left: 54%; top: 3%; width: min(270px, 46%); padding: 14px 16px 15px; border-radius: 18px 18px 18px 4px; background: rgba(16,18,25,.92); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -20px #000; font-size: 14px; font-weight: 600; line-height: 1.45; z-index: 2; animation: balao .5s .75s cubic-bezier(.2,.9,.3,1.3) both; }
.balao::after { content: ""; position: absolute; left: -1px; bottom: -11px; border: 6px solid transparent; border-top-color: rgba(16,18,25,.92); border-left-color: rgba(16,18,25,.92); }
.balao small { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.balao.sai { animation: balaoSai .3s ease-in both; }
@keyframes balao { from { opacity: 0; transform: translateY(10px) scale(.85); transform-origin: left bottom; } }
@keyframes balaoSai { to { opacity: 0; transform: scale(.9); } }
.placa { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 12px; background: rgba(10,11,15,.85); border: 1px solid var(--line2); backdrop-filter: blur(10px); white-space: nowrap; font-weight: 800; font-size: 14px; z-index: 2; animation: troca .45s .4s both; }
.selo-eterno { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: linear-gradient(135deg, #ffe08a, #ffb02e 50%, #d9822b); color: #2a1600; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.selo-eterno svg { width: 11px; height: 11px; }
.pers-pontos { position: absolute; right: 0; bottom: 3%; display: flex; flex-direction: column; gap: 6px; }
.pers-pontos button { width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 2px solid transparent; background: rgba(255,255,255,.06) center 12% / 180% no-repeat; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; }
.pers-pontos button.ativo { opacity: 1; border-color: var(--accent); }
@media (max-width: 959px) { .pers-pontos { display: none; } .balao { left: 50%; } }

.eternos { overflow: hidden; background: radial-gradient(50% 60% at 50% 100%, rgba(255,176,46,.14), transparent 70%), var(--bg); }
.eternos__luzes { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(#000 30%, transparent 85%); mask-image: linear-gradient(#000 30%, transparent 85%); background: conic-gradient(from 200deg at 22% -10%, transparent 0 8deg, rgba(255,214,140,.07) 14deg, transparent 22deg), conic-gradient(from 140deg at 78% -10%, transparent 0 8deg, rgba(255,214,140,.07) 14deg, transparent 22deg); }
.eternos__topo { text-align: center; position: relative; }
.eternos__topo .lead { max-width: 620px; margin-inline: auto; }
.palco-eternos { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; gap: clamp(6px, 2vw, 26px); margin-top: 34px; padding: 30px 16px 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.palco-eternos::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 74px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,176,46,.7), transparent); box-shadow: 0 0 30px 6px rgba(255,176,46,.25); }
.eterno:first-child { margin-left: auto; }
.eterno:last-child { margin-right: auto; }
.eterno { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; cursor: default; }
.eterno__corpo { height: calc(250px * var(--a)); display: flex; align-items: flex-end; transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s; animation: respira 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); filter: brightness(.82) saturate(.9); }
.eterno__corpo img { height: 100%; width: auto; filter: drop-shadow(0 18px 18px rgba(0,0,0,.6)); }
.eterno:hover .eterno__corpo { transform: translateY(-10px) scale(1.04); filter: none; animation-play-state: paused; }
@keyframes respira { 50% { transform: translateY(-3px); } }
.eterno__nome { position: relative; z-index: 1; margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; }
.eterno .selo-eterno { opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.eterno:hover .selo-eterno { opacity: 1; transform: none; }

.discord { background: radial-gradient(90% 90% at 100% 0%, rgba(88,101,242,.35), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important; border-color: rgba(88,101,242,.35) !important; }
.discord__logo { position: absolute; top: 22px; right: 22px; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: #5865f2; box-shadow: 0 14px 40px -10px rgba(88,101,242,.9); animation: flutua 5s ease-in-out infinite; }
.discord__logo svg { width: 36px; height: 36px; color: #fff; }
.btn--discord { background: #5865f2; color: #fff; min-height: 44px; padding: 0 18px; font-size: 14px; align-self: flex-start; box-shadow: 0 10px 30px -12px rgba(88,101,242,.9); }
.btn--discord svg { width: 18px; height: 18px; }

.btn--android { gap: 12px; padding: 0 22px 0 16px; background: linear-gradient(180deg, rgba(61,220,132,.16), rgba(61,220,132,.06)); border-color: rgba(61,220,132,.55); box-shadow: 0 10px 30px -14px rgba(61,220,132,.8); text-align: left; line-height: 1.15; }
.btn--android:hover { border-color: var(--ok); background: rgba(61,220,132,.18); }
.btn--android > svg:first-child { width: 26px; height: 26px; color: var(--ok); }
.btn--android small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); }
.btn--android .apk__seta svg { width: 18px; height: 18px; color: var(--ok); }

@media (max-width: 600px) {
  .eterno__corpo { height: calc(200px * var(--a)); }
  .hero__acoes .btn { flex: 1 1 100%; }
  .pill { white-space: nowrap; }
  .pill code { display: none; }
  .astro { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .nucleo { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  .nucleo img { width: 46px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .surge { opacity: 1; transform: none; } }

/* ===== Adaptacao ao Painel (03/11/2026) ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marca img { height: 38px; }
.pill .copiar { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; cursor: pointer; }
.pill .dot--off { background: #e3262b; animation: none; box-shadow: none; }
.hero__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--mute); }
.hero__links a { text-decoration: underline; text-underline-offset: 4px; }

/* Palco sem JS: o primeiro homenageado fica parado no lugar. */
.pers--parado { transform: translateX(-50%); }

/* Turma (components/crowd_scene.html) no Hall dos Eternos. */
.eternos .crowd { margin-top: 34px; }
.eternos .crowd--foto .crowd__list { width: min(100%, 44rem); padding-bottom: 26px; position: relative; }
.eternos .crowd--foto .crowd__list::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 18px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,176,46,.7), transparent); box-shadow: 0 0 30px 6px rgba(255,176,46,.25); z-index: -1; }
.eternos .crowd--foto .crowd__skin { height: calc(clamp(170px, 30vw, 270px) * var(--altura, 1)); }
/* Todo Eterno aparece, sem teto: 3 por fileira no celular e 5 no PC, sem sobrar um sozinho em cima. */
.eternos .crowd--foto .crowd__char { flex-basis: 33.33%; width: 33.33%; }
@media (min-width: 760px) {
  .eternos .crowd--foto .crowd__list { width: min(100%, 58rem); }
  .eternos .crowd--foto .crowd__char { flex-basis: 20%; width: 20%; }
}
.eternos .crowd--foto .crowd__selo { font-size: .62rem; }
.eternos .crowd--foto .crowd__nick { font-size: .78rem; }

/* Mapa: mosaico do zoom 1 (3x3 tiles), o mesmo da landing antiga. */
.bento__mapa { background: none !important; isolation: isolate; }
.bento__tiles { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); opacity: .85; }
.bento__tiles img { width: 100%; height: 100%; object-fit: cover; }
.bento__mapa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,15,.15) 10%, rgba(10,11,15,.96) 82%); }
.numeros-mini { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; font-size: 13px; color: var(--mute); }
.numeros-mini strong { color: var(--ink); font-size: 16px; }
.familias a, .familias span { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 12px; font-family: var(--display); font-size: 15px; border: 3px solid var(--bg2); overflow: hidden; background: var(--cor, var(--accent)); }
.familias a:first-child, .familias span:first-child { margin-left: 0; }
.familias img { width: 100%; height: 100%; object-fit: cover; }
.bento__acoes { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.missao { max-width: 760px; }

/* Onde jogar: passos com botao */
.passos li > div { display: grid; gap: 6px; }
.passos li small { color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.passos .btn { min-height: 38px; padding: 0 14px; font-size: 13px; justify-self: start; }
.passos code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--amber); }
.jogar__nota { color: var(--dim) !important; font-size: 12.5px; margin: 14px 0 0 !important; }
kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line2); font-size: 12px; }

/* Criadores sem JS: lista simples no lugar da constelacao. */
.constelacao--lista { height: auto; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 20px 0; }
.constelacao--lista a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.constelacao--lista img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); }
.astro__letra { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); background: var(--bg3); font-family: var(--display); font-size: 28px; }
.posts { display: flex; gap: 12px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.posts a { flex: none; width: 120px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.posts img { width: 100%; height: 100%; object-fit: cover; }

/* Eventos reais */
.evento__oferta { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--amber); }
.evento__arte { width: 56px; height: 56px; object-fit: contain; margin-left: auto; flex: none; }

/* Formularios reais */
.campo select { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.campo select option { background: var(--bg2); color: var(--ink); }
.erro { font-size: 12.5px; font-weight: 700; color: #ff6b6b; }
.campo--erro .entrada { border-color: #ff6b6b; }
.avisos-form { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.avisos-form li { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; border: 1px solid var(--line2); background: rgba(255,255,255,.04); }
.avisos-form li.erro, .avisos-form li.error { border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.08); color: #ffb3b3; }
.avisos-form li.success { border-color: rgba(61,220,132,.45); background: rgba(61,220,132,.08); color: #b8f5d2; }
.avisos-form li.info, .avisos-form li.warning { border-color: rgba(255,176,46,.45); background: rgba(255,176,46,.08); color: #ffe1a8; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.nick-ideias { display: flex; flex-wrap: wrap; gap: 6px; }
.nick-ideias button { border: 1px solid var(--line2); background: rgba(255,255,255,.05); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.nick-ideias button:hover { border-color: var(--accent); }
.ajuda.ruim { color: #ff6b6b; }
.cadastro-sem-js fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.cadastro-sem-js legend { font-family: var(--display); font-size: 18px; margin-bottom: 12px; }
.ticker a.aviso:hover { border-color: rgba(255,90,6,.6); }

/* Celular: a arte some (maquete). */
@media (max-width: 999px) {
}

/* Modal de termos (registration/terms_modal.html), no tema do portal */
body.terms-modal-open { overflow: hidden; }
.terms-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.terms-modal[hidden] { display: none; }
.terms-modal__backdrop { position: absolute; inset: 0; background: rgba(5,6,10,.78); backdrop-filter: blur(6px); }
.terms-modal__dialog { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 40px 80px -30px #000; }
.terms-modal__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.terms-modal__header h3 { font-family: var(--font); font-weight: 800; font-size: 17px; }
.terms-modal__close { border: 0; background: rgba(255,255,255,.06); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; font-size: 0; }
.terms-modal__close::before { content: "\00d7"; font-size: 22px; line-height: 36px; }
.terms-modal .material-icons { display: none; }
.terms-modal__scroll-hint { margin: 0; padding: 10px 20px; font-size: 13px; color: var(--amber); background: rgba(255,176,46,.07); }
.terms-modal__scroll-hint.is-done { color: var(--ok); background: rgba(61,220,132,.07); }
.terms-modal__body { overflow-y: auto; padding: 18px 20px; outline: 0; }
.terms-block { margin-bottom: 18px; }
.terms-block h4 { margin: 0 0 8px; font-size: 15px; }
.terms-block p, .terms-block li { color: var(--mute); font-size: 14px; line-height: 1.6; }
.terms-block__note { font-size: 12.5px; color: var(--dim) !important; }
.terms-rules-frame iframe { width: 100%; height: 420px; border: 0; border-radius: 12px; background: #fff; }
.terms-modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.terms-modal__footer .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.terms-modal__footer .btn-outline-secondary { background: rgba(255,255,255,.05); border-color: var(--line2); }
.terms-modal__footer .btn-primary { background: linear-gradient(180deg, #ff6d1f, var(--accent)); color: #fff; }

.conta__lado > .pill { align-self: center; margin-top: 26px; }

.portal .auth-portal__footer { margin: 28px 0 0; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.6; }
.portal .auth-portal__footer a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.selo h1 { display: inline; margin: 0; font: inherit; letter-spacing: 0; line-height: inherit; }
[data-ilha="brasas"] { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.campo label.escolha { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.campo label.escolha strong { font-weight: 800; }

/* Login no PC: a arte e o formulario cabem na tela. */
@media (min-width: 1000px) {
  .conta--login { height: 100vh; height: 100dvh; min-height: 680px; }
  .conta--login .conta__arte { padding: 24px 48px 0; gap: 10px; overflow: hidden; }
  .conta--login .conta__arte h2 { font-size: clamp(26px, 2.7vw, 40px); max-width: none; }
  .conta--login .conta__arte .eyebrow { margin-bottom: 8px; }
  .conta--login .ticker { margin-top: 14px !important; gap: 6px; }
  .conta--login .ticker .aviso { padding: 6px 12px; }
  .conta--login .mini-criadores { margin-top: 12px; }
  .conta--login .mini-criadores__fotos img { width: 30px; height: 30px; }
  .conta--login .conta__lado { overflow-y: auto; justify-content: flex-start; padding-top: 84px; }
  .conta--login .conta__lado .form { margin-top: auto; }
  .conta--login .conta__lado .auth-portal__footer { margin-bottom: auto; }
}

/* Segredos da landing (js/portal.js): so visuais. */
.segredo-estrelas { position: fixed; z-index: 2000; top: 76px; right: 16px; display: flex; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); pointer-events: none; }
.segredo-estrelas svg { width: 24px; height: 24px; color: #ffd54a; filter: drop-shadow(0 0 8px rgba(255, 213, 74, .9)); animation: segredo-pisca .5s steps(1) infinite; }
.segredo-estrelas svg:nth-child(even) { animation-delay: .25s; }
@keyframes segredo-pisca { 50% { opacity: .35; } }
.segredo-codigo { position: fixed; z-index: 2000; left: 50%; bottom: 120px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 14px; background: rgba(10, 8, 20, .94); border: 1px solid var(--accent); box-shadow: 0 20px 50px -20px #000; font-size: 14px; font-weight: 700; pointer-events: none; }
.segredo-codigo small { display: block; margin-bottom: 4px; color: var(--amber); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }