@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(fontes/Baloo2-800-latin.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url(fontes/Nunito-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(fontes/Nunito-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url(fontes/Nunito-800-latin.woff2) format('woff2'); }

/* Tema "noite espacial": o tema escuro do app (azul-marinho, nunca preto). */
:root { color-scheme: dark; --navy: #2B2D5B; --navyBase: #15163A; --lilas: #C7C3FF; --menta: #A8F0C6; --pessego: #FFD3C2; --texto: #E4E2FF; --suave: #A9A7D6; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--navyBase); }
body { font-family: 'Nunito', system-ui, sans-serif; color: #fff; line-height: 1.45; min-height: 100svh; overflow-x: hidden;
  background: linear-gradient(#15163A 0%, #2B2D5B 70%, #3a3570 100%) fixed; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .75;
  background-image: radial-gradient(#fff 1.2px, transparent 1.6px), radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.3px), radial-gradient(#C7C3FF 1.5px, transparent 2px);
  background-size: 73px 67px, 41px 37px, 127px 113px; background-position: 0 0, 19px 23px, 50px 31px; }
main, .pagina { position: relative; }
html, body { overflow-x: clip; }
.pagina { overflow-x: clip; }
h1, h2, .logo { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; line-height: 1.08; }
a { color: inherit; text-decoration: none; }
.logo { font-size: 24px; }
.pagina { max-width: 460px; margin: 0 auto; padding: 20px 22px 28px; }
header { display: flex; justify-content: space-between; align-items: center; }
header a { font-weight: 800; font-size: 14px; color: var(--lilas); }
.rodape { margin-top: 26px; text-align: center; font-size: 13px; color: var(--suave); }
.rodape a:hover { color: #fff; text-decoration: underline; }

/* Selos das lojas */
.lojas { display: flex; gap: 10px; margin-top: 22px; }
.loja { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; color: #000; border-radius: 12px; padding: 8px 12px; }
.loja svg { width: 22px; height: 22px; flex: none; }
.loja small { display: block; font-size: 10px; font-weight: 700; opacity: .8; line-height: 1.1; }
.loja b { display: block; font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -.2px; }

/* Início */
.palco { position: relative; height: 300px; margin-top: 6px; }
.orbita { position: absolute; left: -40px; right: -40px; top: 40px; height: 240px; border: 2px dashed rgba(199,195,255,.45); border-radius: 50%; transform: rotate(-12deg); }
.palco .nave { position: absolute; width: 210px; left: 50%; top: 60px; transform: translateX(-58%) rotate(-10deg); filter: drop-shadow(0 0 30px rgba(199,195,255,.35)); }
.planeta { position: absolute; filter: drop-shadow(0 0 18px rgba(199,195,255,.35)); }
.inicio h1 { font-size: 38px; text-align: center; }
.inicio h1 em { font-style: normal; color: var(--menta); }
.sub { font-size: 16.5px; margin-top: 10px; text-align: center; color: var(--texto); }
.celulares { position: relative; height: 500px; margin-top: 34px; }
.celulares img { position: absolute; width: 205px; filter: drop-shadow(0 18px 34px rgba(0,0,0,.45)); }
.inicio h2 { font-size: 28px; text-align: center; margin-top: 8px; }
.grade { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item { background: rgba(255,255,255,.07); border: 1.5px solid rgba(199,195,255,.35); border-radius: 18px; padding: 14px 12px; text-align: center; }
.item img { width: 58px; height: 58px; object-fit: contain; }
.item b { display: block; font-family: 'Baloo 2'; font-size: 17px; margin-top: 4px; line-height: 1.1; }
.item span { font-size: 13px; color: #D8D6F5; }
.selo { margin-top: 24px; text-align: center; font-size: 14px; color: #D8D6F5; }
.selo b { display: block; font-family: 'Baloo 2'; font-size: 17px; color: #fff; }

/* Links */
.links { text-align: center; padding-top: 34px; }
.avatar { width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--lilas); box-shadow: 0 0 0 6px rgba(199,195,255,.18), 0 0 40px rgba(199,195,255,.35); }
.links h1 { font-size: 26px; margin-top: 14px; }
.links p { font-size: 15px; color: var(--texto); }
.lista { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.relevo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 2.5px solid #fff; box-shadow: 0 4px 0 rgba(255,255,255,.35); font-weight: 800; font-size: 16px; color: var(--navy); transition: transform .1s; }
.relevo:hover { transform: translateY(-2px); }
.relevo img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.relevo small { display: block; font-weight: 700; font-size: 12.5px; color: #4b4d7a; }
.relevo .seta { margin-left: auto; font-size: 20px; }
.menta { background: var(--menta); } .lilas { background: var(--lilas); } .pessego { background: var(--pessego); }
.links .nave { width: 150px; margin-top: 30px; filter: drop-shadow(0 0 24px rgba(199,195,255,.35)); }

/* Textos (privacidade, termos, apagar a conta) */
.texto { max-width: 680px; margin: 0 auto; padding: 24px 22px 40px; color: var(--texto); }
.texto .logo { display: inline-block; margin-bottom: 22px; color: #fff; }
.texto h1 { font-size: 32px; color: #fff; }
.texto .data { color: var(--suave); font-size: 14px; margin-top: 4px; }
.texto h2 { font-size: 21px; margin-top: 26px; color: var(--menta); }
.texto p, .texto li { margin-top: 8px; font-size: 16px; }
.texto ol, .texto ul { padding-left: 22px; }
.texto p a, .texto li a { color: var(--lilas); text-decoration: underline; }
.texto .rodape { margin-top: 40px; }

/* 404 */
.perdido { text-align: center; padding-top: 60px; }
.perdido .nave { width: 200px; margin: 30px auto; display: block; }
.perdido h1 { font-size: 30px; }
.perdido .relevo { display: inline-flex; margin-top: 24px; }
body.leitura::before { opacity: .22; }