/* Estilos do site que não fazem parte do design system (ds/). */
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font-family: var(--font-texto); min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.pular { position: absolute; left: var(--espaco-4); top: -100px; z-index: 999; padding: var(--espaco-2) var(--espaco-4); background: var(--acao); color: var(--sobre-acao); border-radius: var(--raio-2); font: 500 15px/24px var(--font-texto); }
.pular:focus { top: var(--espaco-3); }
.jp-cabecalho .jp-nav:empty { display: none; }

/* ---------- Página inicial ---------- */
html:has(body.pagina-inicial) { background: var(--jp-azul-escuro); }
.pagina-inicial { overflow: hidden; height: 100dvh; background: radial-gradient(ellipse at 50% 50%, rgba(42, 157, 142, 0.10), transparent 62%), var(--jp-azul-escuro); }
.inicio { position: relative; flex: 1 1 auto; display: grid; place-items: center; }
.inicio canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.inicio-estatico { display: none; width: min(78vw, 860px); height: auto; }
.sem-animacao .inicio canvas { display: none; }
.sem-animacao .inicio-estatico { display: block; }
.inicio-rodape { position: relative; display: flex; justify-content: center; gap: var(--espaco-5); padding: var(--espaco-4) var(--espaco-4) max(var(--espaco-4), env(safe-area-inset-bottom)); }
.inicio-rodape a { font: 500 13px/20px var(--font-texto); color: var(--texto-suave); text-decoration: none; }
.inicio-rodape a:hover, .inicio-rodape a:focus-visible { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Páginas legais ---------- */
.legal { padding-block: var(--espaco-8) var(--espaco-9); }
.legal-cabecalho { display: grid; gap: var(--espaco-3); max-width: var(--largura-texto); margin-bottom: var(--espaco-7); padding-bottom: var(--espaco-6); border-bottom: 1px solid var(--linha); }
.legal-cabecalho h1 { margin: 0; }
.legal-cabecalho .jp-sobretitulo { margin: 0; }
.legal-data { margin: 0; font: 500 13px/20px var(--font-texto); color: var(--texto-suave); }
.legal-data:empty { display: none; }

/* ---------- Páginas de apps ----------
   Cada app define suas cores em /<app>/app.css (variáveis --app-*). */
.pagina-app {
  --app-primaria: var(--jp-verde-agua);
  --app-sobre-primaria: var(--jp-azul-escuro);
  --app-capa-fundo: var(--jp-azul-escuro);
  --app-capa-texto: var(--jp-branco);
  --app-fonte-titulo: var(--font-marca);
  --app-raio-icone: 24%;
}
.app-capa { background: var(--app-capa-fundo); color: var(--app-capa-texto); padding-block: var(--espaco-9); }
.app-capa-in { display: grid; justify-items: center; text-align: center; gap: var(--espaco-5); }
.app-icone { width: 112px; height: 112px; border-radius: var(--app-raio-icone); box-shadow: var(--sombra-3); }
.app-nome { margin: 0; font: 600 clamp(36px, 7vw, 64px)/1.05 var(--app-fonte-titulo); letter-spacing: 0.01em; }
.app-slogan { margin: 0; max-width: 560px; font: 400 19px/32px var(--font-texto); opacity: 0.85; }
.app-slogan:empty, .app-acoes:empty { display: none; }
.app-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espaco-3); }
.app-acoes .jp-btn-primario { background: var(--app-primaria); color: var(--app-sobre-primaria); }
.app-secao { padding-block: var(--espaco-8); }
.app-secao-alt { background: var(--fundo-alt); }
.app-secao:has(> .jp-container:empty) { display: none; }
.app-grade { display: grid; gap: var(--espaco-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.app-telas { display: flex; gap: var(--espaco-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--espaco-3); }
.app-telas img { flex: 0 0 auto; width: 240px; border-radius: var(--raio-3); scroll-snap-align: start; box-shadow: var(--sombra-2); }
.app-selo { display: inline-flex; align-items: center; gap: var(--espaco-2); width: fit-content; color: var(--texto); text-decoration: none; font: 600 13px/16px var(--font-marca); letter-spacing: 0.14em; text-transform: uppercase; }
.app-selo img { border-radius: var(--app-raio-icone); }

@media (max-width: 767px) {
  .legal { padding-block: var(--espaco-7) var(--espaco-8); }
  .app-capa { padding-block: var(--espaco-8); }
}
.erro-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin: 0; }
.contato-email { display: inline-block; margin-bottom: var(--espaco-6); font: 700 clamp(22px, 4.5vw, 36px)/1.2 var(--font-texto); letter-spacing: -0.01em; color: var(--destaque-texto); text-decoration: none; overflow-wrap: anywhere; }
.contato-email:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }