/* Go Bee Zap — páginas dos jogos educacionais (/jogos/ e /jogos/<jogo>/).
   Complementa o site.css. Público infantil: estas páginas NÃO carregam nada
   de terceiros — por isso a fonte é servida daqui, e não do Google Fonts
   (licença OFL em assets/fonts/OFL-nunito-sans.txt). */

@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DESIGN SYSTEM GO BEESINESS nas páginas dos jogos (Go Beesiness Design System,
   colors_and_type.css): pilha Avenir Next → Nunito Sans; a Nunito Sans (OFL) é servida
   daqui. A Avenir Next tem licença só de desktop: NÃO é publicada — quem a tem instalada
   no aparelho a vê, os demais veem a Nunito Sans. Pesos 400/600/700/800; itálico só em
   destaque e número. Escala do DS: 48/36/28/22/18/16/14/12. Preto #0B0C0D, amarelo #FFCB05
   (os tokens --ink e --honey do site.css já são esses). */
html[data-sem-rastreio]{
  --f:'Avenir Next Cyr','Avenir Next','Avenir','Nunito Sans',system-ui,-apple-system,sans-serif;
  --t-display:clamp(2.25rem,1.6rem + 2.6vw,3rem);   /* 36 → 48 */
  --t-xl:1.75rem;      /* 28 — títulos de seção (h2) */
  --t-lg:1.375rem;     /* 22 — h3 */
  --t-md:1.375rem;     /* 22 */
  --t-sm:1.125rem;     /* 18 — h4 e linha fina */
  --t-body:1rem;       /* 16 */
  --t-body-sm:.875rem; /* 14 */
  --t-cap:.75rem;      /* 12 */
  --t-cap-xs:.75rem;   /* 12 — a escala do DS não desce a 11 */
}
@media(min-width:768px){html[data-sem-rastreio]{--t-xl:2.25rem}} /* 36 — h1 do DS no desktop */
html[data-sem-rastreio] .reveal-line{font-size:clamp(1.75rem,1rem + 3vw,3rem)}

/* ARTE E CORES DOS ODS — arte própria da Go Beesiness, aprovada pelo CEO em 12/10/2026.
   Origem: gobee-zap/jogos, branch estrutura/governanca-e-kit @ 684bbb6 —
   jogos/memoria-ods/src/ods.ts (cores) e jogos/memoria-ods/assets/ods/ (os 17 SVG, copiados sem
   alteração para img/ods/). As cores partem do matiz da ONU, mas NÃO são as oficiais (ΔE2000 >= 9),
   e nenhum ícone oficial da ONU é usado. Texto branco sobre cada cor: contraste >= 4,6 (AA).
   Mudou a arte no repo dos jogos? Copie de novo os SVG e as cores daqui. */
.jg-ods-1{--c:#c00329}.jg-ods-2{--c:#7d590a}.jg-ods-3{--c:#1f6a05}.jg-ods-4{--c:#90272b}.jg-ods-5{--c:#d82913}.jg-ods-6{--c:#117e98}
.jg-ods-7{--c:#916f01}.jg-ods-8{--c:#7a002d}.jg-ods-9{--c:#b8572f}.jg-ods-10{--c:#b10550}.jg-ods-11{--c:#a96508}.jg-ods-12{--c:#604101}
.jg-ods-13{--c:#3d6640}.jg-ods-14{--c:#207caf}.jg-ods-15{--c:#328407}.jg-ods-16{--c:#184f72}.jg-ods-17{--c:#002b48}
/* Carta do ODS em duas versões, como no jogo:
   positiva = fundo na cor do ODS, texto branco (carta aberta);
   negativa = fundo creme, borda na cor do ODS, texto escuro (carta "já achada"). */
.jg-ods{--creme:#e9e6dc;--escuro:#1d1d1f;display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;
  border-radius:var(--r-md);padding:var(--s3);border:3px solid var(--c);min-height:100%}
.jg-ods--pos{background:var(--c);color:#fff}
.jg-ods--neg{background:var(--creme);color:var(--escuro)}
.jg-ods img{width:56px;height:56px;display:block;flex:none}
.jg-ods__selo{font-size:var(--t-cap);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.jg-ods__nome{font-size:var(--t-body-sm);font-weight:700;line-height:1.25;overflow-wrap:break-word}
.jg-ods__acao{font-size:var(--t-body-sm);font-weight:800;line-height:1.25}
.jg-ods-grade{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}
@media(min-width:640px){.jg-ods-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.jg-ods-grade{grid-template-columns:repeat(5,minmax(0,1fr))}}
.jg-ods-grade li{display:flex}
.jg-ods-grade .jg-ods{width:100%}
.jg-legenda{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:0 0 var(--s6);padding:0;list-style:none;
  font-size:var(--t-body-sm);color:var(--ink-3)}
.jg-legenda li{display:flex;align-items:center;gap:var(--s2)}
.jg-legenda i{width:18px;height:18px;border-radius:var(--r-sm);display:inline-block;border:3px solid #117e98}
.jg-legenda .pos{background:#117e98}
.jg-legenda .neg{background:#e9e6dc}

/* ---------- Mesa de cartas (ilustração do hero) ---------- */
.jg-mesa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);
  box-shadow:var(--e2);max-width:30rem;margin:0}
@media(min-width:560px){.jg-mesa{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jg-mesa .jg-ods{aspect-ratio:3/4;min-height:0}
.jg-acao{aspect-ratio:3/4;border-radius:var(--r-md);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  background:#5a4e44;color:#fff;border:3px dashed #fff}
.jg-acao small{font-size:var(--t-cap);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.jg-acao b{font-size:var(--t-body-sm);line-height:1.25}
.jg-verso{aspect-ratio:3/4;border-radius:var(--r-md);background:#2b2d42;color:#fff;display:grid;place-items:center;
  font-size:var(--t-xl);font-weight:800}
.jg-mesa figcaption{grid-column:1/-1;font-size:var(--t-cap);color:var(--muted);font-weight:700}

/* ---------- Lista de garantias para a família ---------- */
.jg-garantias{display:grid;gap:var(--s4)}
@media(min-width:768px){.jg-garantias{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.jg-garantias{grid-template-columns:repeat(3,1fr)}}
.jg-garantia{display:flex;gap:var(--s4);align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.jg-garantia h3{font-size:var(--t-body);font-weight:800;margin-bottom:var(--s2)}
.jg-garantia p{font-size:var(--t-body-sm);color:var(--ink-3);margin:0}
.jg-garantia .ic-hex{background:var(--zap);color:var(--fixed-black)}

/* ---------- Passos ---------- */
.jg-passos{display:grid;gap:var(--s4);counter-reset:passo;list-style:none;margin:0;padding:0}
@media(min-width:900px){.jg-passos{grid-template-columns:repeat(3,1fr)}}
.jg-passos li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.jg-passos li::before{counter-increment:passo;content:counter(passo,decimal-leading-zero);display:block;
  font-size:var(--t-xl);font-weight:800;color:var(--zap-ink);line-height:1;margin-bottom:var(--s3)}
.jg-passos h3{font-size:var(--t-body);font-weight:800;margin-bottom:var(--s2)}
.jg-passos p{font-size:var(--t-body-sm);color:var(--ink-3);margin:0}

/* ---------- Catálogo ---------- */
.jg-cat{display:grid;gap:var(--s4)}
@media(min-width:900px){.jg-cat{grid-template-columns:2fr 1fr}}
.jg-jogo{display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6)}
.jg-jogo h3{font-size:var(--t-lg);font-weight:800}
.jg-jogo p{font-size:var(--t-body-sm);color:var(--ink-3);margin:0}
.jg-jogo .hero__cta{margin-top:var(--s3)}
.jg-etiquetas{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0;padding:0}
.jg-etiquetas li{font-size:var(--t-cap);font-weight:700;padding:var(--s1) var(--s3);border-radius:var(--r-full);
  background:var(--zap-subtle);color:var(--zap-ink);border:1px solid var(--zap-line)}
.jg-estado{align-self:flex-start;font-size:var(--t-cap);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:var(--s1) var(--s3);border-radius:var(--r-full);background:var(--honey-50);color:var(--ink);
  border:1px solid var(--honey-300)}

/* ---------- Pares e faixas ---------- */
.jg-pares{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
@media(min-width:768px){.jg-pares{grid-template-columns:repeat(2,1fr)}}
.jg-par{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}
.jg-par__n{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:var(--c);
  color:#fff;font-weight:800;font-size:var(--t-body)}
.jg-par b{display:block;font-size:var(--t-body-sm);font-weight:800}
.jg-par span{font-size:var(--t-body-sm);color:var(--ink-3)}
.jg-tabela{width:100%;border-collapse:collapse;font-size:var(--t-body-sm);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.jg-tabela th,.jg-tabela td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.jg-tabela thead th{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.jg-tabela tbody tr:last-child td,.jg-tabela tbody tr:last-child th{border-bottom:0}
.jg-tabela code,.jg-codigos code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-body-sm)}
.jg-codigos{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0;padding:0}
.jg-codigos li{padding:var(--s1) var(--s2);border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.jg-nota{font-size:var(--t-cap);color:var(--muted);margin-top:var(--s4);max-width:var(--read)}

/* ---------- Demonstração ---------- */
.jg-demo{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--e2)}
.jg-demo iframe{display:block;width:100%;height:min(80vh,44rem);min-height:32rem;border:0;background:#fff8e1}
/* O iframe só aparece quando a sonda (jogos.js) confirma que o build do jogo está
   publicado e lhe dá o src. Até lá, só o aviso "em breve". */
.jg-demo:not(.jg-demo--pronta) iframe{display:none}
.jg-demo--pronta .jg-demo__aviso{display:none}
.jg-demo__aviso{padding:var(--s8) var(--s6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.jg-demo__aviso h3{font-size:var(--t-sm);font-weight:800}
.jg-demo__aviso p{font-size:var(--t-body-sm);color:var(--ink-3);max-width:34rem;margin:0}

/* ---------- Pequenos ajustes ---------- */
.jg-sem-rastreio{display:flex;gap:var(--s2);align-items:center}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:100;background:var(--honey);color:var(--fixed-black);
  padding:var(--s2) var(--s3);border-radius:var(--r);font-weight:800;text-decoration:none}
.skip:focus{top:var(--s4)}
.jg-link{color:var(--zap-ink);font-weight:800}
.sec--dark .jg-link{color:var(--honey)}

/* Tabela das faixas no celular: cada faixa vira um cartão (sem rolagem lateral). */
@media(max-width:639px){
  .jg-tabela,.jg-tabela tbody,.jg-tabela tr,.jg-tabela th,.jg-tabela td{display:block;width:100%}
  .jg-tabela thead{display:none}
  .jg-tabela tr{border-bottom:1px solid var(--line);padding:var(--s3) 0}
  .jg-tabela tbody tr:last-child{border-bottom:0}
  .jg-tabela th,.jg-tabela td{border-bottom:0;padding:var(--s1) var(--s4)}
  .jg-tabela td::before{content:attr(data-rotulo);display:block;font-size:var(--t-cap);font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s1)}
}

/* ---------- Micro-história e transformação (passos 5 e 6) ---------- */
.jg-historia{display:grid;gap:var(--s8);align-items:center}
@media(min-width:900px){.jg-historia{grid-template-columns:3fr 2fr}.jg-historia--inv{grid-template-columns:2fr 3fr}}
.jg-historia .lede code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.jg-par-visual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0;max-width:24rem;
  width:100%;justify-self:center}
.jg-par-visual .jg-ods,.jg-par-visual .jg-acao{aspect-ratio:3/4;min-height:0}
/* carta de ação "já achada": creme, borda na cor da ação, texto escuro — como no jogo */
.jg-acao--achada{background:#e9e6dc;color:#1d1d1f;border:3px solid #5a4e44}

/* ---------- Vagas de imagem (J1–J6: personagens da Go Beesiness gerados com IA) ----------
   <picture> com AVIF/WebP em 480/960/1600. Enquanto o arquivo não existe, jogos.js marca a vaga
   como vazia e ela vira um fundo leve de favo (sem texto); no topo, ficam as cartas no lugar. */
.jg-foto{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--honey-50);width:100%}
.jg-foto::before{content:"";position:absolute;inset:0;background-image:var(--comb);background-size:56px 100px;opacity:.08}
.jg-foto--16x9{aspect-ratio:16/9}
.jg-foto--4x5{aspect-ratio:4/5}
.jg-foto picture,.jg-foto img{position:absolute;inset:0;width:100%;height:100%;display:block}
.jg-foto img{object-fit:cover;object-position:center}
.jg-foto--vazia img{visibility:hidden}
.jg-foto--larga{max-width:100%}
.jg-foto--cta{max-width:22rem;margin-top:var(--s8);background:var(--dark-2)}
.jg-foto--cta::before{filter:invert(1)}
/* topo: a foto só aparece quando carregou; até lá (ou sem ela), as cartas ocupam o lugar */
.jg-topo .jg-foto{display:none}
.jg-topo--foto .jg-foto{display:block}
.jg-topo--foto .jg-mesa{display:none}
/* alternância imagem/texto */
.jg-alterna{display:grid;gap:var(--s8);align-items:center}
.jg-alterna>.jg-foto--4x5{max-width:26rem;justify-self:center}
@media(min-width:900px){
  .jg-alterna{grid-template-columns:2fr 3fr;gap:var(--s12)}
  .jg-alterna--inv{grid-template-columns:3fr 2fr}
  .jg-alterna--inv>.jg-foto{order:2}
}
.jg-empilha{grid-template-columns:1fr;gap:var(--s4)}