/* =========================================================================
   VIALI · Sistema visual dos jogos (papel + computador)
   Display: Fredoka (arredondada, amigável) · Texto: Lexend (legibilidade)
   4º ano = Caleidoscópio (prismas)  ·  5º ano = Cartografia (mapa)
   ========================================================================= */
@import url("fonts/fonts.css");

:root{
  /* Base VIALI */
  --tinta:#1c2147;        /* azul-noite: texto e traços */
  --tinta-2:#4a5078;      /* texto secundário */
  --tinta-3:#8a8fae;      /* legendas */
  --papel:#ffffff;
  --nevoa:#f3f4fa;        /* fundo de áreas */
  --linha:#dfe2ef;
  --viali:#3b3fd8;        /* azul VIALI (marca) */
  --viali-2:#6e72f0;

  /* 4º ano · cores do prisma (também cores das equipes A–F) */
  --magenta:#e6337f;  --magenta-c:#fde6f0;
  --azul:#2f6df2;     --azul-c:#e3ecfe;
  --laranja:#ff7a29;  --laranja-c:#ffeadc;
  --violeta:#7b4fe0;  --violeta-c:#ece5fc;
  --turquesa:#12b3a6; --turquesa-c:#dcf5f2;
  --amarelo:#ffc12e;  --amarelo-c:#fff3d1;
  /* cores do baralho-base */
  --c-azul:#2f6df2; --c-vermelho:#ef3b4a; --c-amarelo:#ffbf1f; --c-verde:#1fae64;

  /* 5º ano · cartografia */
  --mapa-papel:#fbf7ec;   /* papel de mapa */
  --mapa-linha:#e6dcc2;   /* curvas de nível */
  --mar:#cfe8ef;
  --conexoes:#ef5d7a;  --conexoes-c:#fde5ea;   /* Território das Conexões */
  --escolhas:#f29b1f;  --escolhas-c:#fdeed3;   /* Território das Escolhas */
  --sinais:#1d9bd7;    --sinais-c:#dcf0fa;     /* Território dos Sinais */
  /* famílias de cartas */
  --f-rumo:#8b5cf6;    --f-rumo-c:#efe8fe;     /* Meu Rumo */
  --f-missao:#16a06b;  --f-missao-c:#dcf4e9;   /* Missão */
  --f-agora:#f07c1b;   --f-agora-c:#fdebdb;    /* E Agora? */
  --f-virada:#e3407e;  --f-virada-c:#fce3ed;   /* Virada */
  --moeda:#f5b301;     --moeda-2:#c98a00;
  --coord:#1d9bd7;

  --ok:#16a06b; --erro:#e5484d; --alerta:#f5a524;

  --f-display:"Fredoka","Baloo 2","Nunito","Trebuchet MS",system-ui,sans-serif;
  --f-texto:"Lexend","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;

  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:32px;
  --sombra:0 1px 2px rgba(28,33,71,.06),0 6px 18px rgba(28,33,71,.08);
  --sombra-forte:0 2px 4px rgba(28,33,71,.08),0 18px 40px rgba(28,33,71,.16);
}

/* ---------- utilidades comuns ---------- */
.v-display{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;line-height:1.05}
.v-rotulo{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.72em}
.v-num{font-variant-numeric:tabular-nums}
.v-chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-display);font-weight:600;font-size:.8em;padding:.25em .75em;border-radius:999px;background:var(--nevoa);color:var(--tinta);white-space:nowrap}
.v-icone{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}
.v-icone svg{width:100%;height:100%;display:block}

/* equipe: classe .eq-A ... .eq-F define --eq e --eq-c */
.eq-A{--eq:var(--magenta);--eq-c:var(--magenta-c)}
.eq-B{--eq:var(--azul);--eq-c:var(--azul-c)}
.eq-C{--eq:var(--laranja);--eq-c:var(--laranja-c)}
.eq-D{--eq:var(--violeta);--eq-c:var(--violeta-c)}
.eq-E{--eq:var(--turquesa);--eq-c:var(--turquesa-c)}
.eq-F{--eq:var(--amarelo);--eq-c:var(--amarelo-c)}
/* território */
.t-conexoes{--t:var(--conexoes);--t-c:var(--conexoes-c)}
.t-escolhas{--t:var(--escolhas);--t-c:var(--escolhas-c)}
.t-sinais{--t:var(--sinais);--t-c:var(--sinais-c)}
/* família de carta */
.fam-meuRumo{--fam:var(--f-rumo);--fam-c:var(--f-rumo-c)}
.fam-missao{--fam:var(--f-missao);--fam-c:var(--f-missao-c)}
.fam-eAgora{--fam:var(--f-agora);--fam-c:var(--f-agora-c)}
.fam-virada{--fam:var(--f-virada);--fam-c:var(--f-virada-c)}

/* =========================================================================
   PAPEL (impressão) — use <body class="papel"> e <section class="folha">
   ========================================================================= */
.papel{margin:0;background:#e9eaf2;font-family:var(--f-texto);color:var(--tinta);font-size:10.5pt;line-height:1.45;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.papel *{box-sizing:border-box}
.folha{width:210mm;height:297mm;margin:10mm auto;background:#fff;position:relative;overflow:hidden;padding:14mm 14mm 16mm;box-shadow:0 4px 24px rgba(0,0,0,.12);page-break-after:always;break-after:page}
.folha.a3{width:420mm;height:297mm}
.folha.paisagem{width:297mm;height:210mm}
.folha.sangria{padding:0}
@media print{
  .papel{background:#fff}
  .folha{margin:0;box-shadow:none}
  .nao-imprime{display:none!important}
}
.folha h1,.folha h2,.folha h3{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.1;letter-spacing:-.01em}
.folha p{margin:0 0 2.2mm}
/* rodapé de página */
.rodape{position:absolute;left:14mm;right:14mm;bottom:7mm;display:flex;justify-content:space-between;align-items:center;font-size:7.5pt;color:var(--tinta-3);font-family:var(--f-display);font-weight:500;letter-spacing:.04em}
.rodape .pag{font-variant-numeric:tabular-nums}
/* linha de corte e dobra */
.corte{border:1px dashed #9aa0bf}
.corte-h{border-top:1px dashed #9aa0bf}
.corte-v{border-left:1px dashed #9aa0bf}
.tesoura{font-size:8pt;color:var(--tinta-3);display:flex;align-items:center;gap:2mm}
.dobra{border-top:1px dotted #b8bcd4}
/* caixas no guia */
.caixa{border-radius:4mm;padding:4mm 5mm;background:var(--nevoa)}
.caixa-dica{border-radius:4mm;padding:3.5mm 4.5mm;background:var(--amarelo-c);border-left:2.2mm solid var(--amarelo)}
.caixa-fala{border-radius:4mm;padding:3mm 4.5mm;background:var(--azul-c);font-style:italic}
.tabela{width:100%;border-collapse:collapse;font-size:9.5pt}
.tabela th{font-family:var(--f-display);font-weight:600;text-align:left;font-size:8pt;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);border-bottom:.5mm solid var(--tinta);padding:1.6mm 2mm}
.tabela td{border-bottom:.25mm solid var(--linha);padding:1.8mm 2mm;vertical-align:top}

/* =========================================================================
   TELA (computador) — use <body class="tela">
   ========================================================================= */
.tela{margin:0;min-height:100vh;font-family:var(--f-texto);color:var(--tinta);background:var(--nevoa);font-size:18px;line-height:1.5}
.tela *{box-sizing:border-box}
.tela h1,.tela h2,.tela h3{font-family:var(--f-display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
.btn{appearance:none;border:0;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.4em;border-radius:999px;background:var(--viali);color:#fff;box-shadow:0 3px 0 rgba(28,33,71,.25);transition:transform .12s ease,box-shadow .12s ease,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 rgba(28,33,71,.25)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(28,33,71,.25)}
.btn:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
.btn.sec{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--linha),0 3px 0 rgba(28,33,71,.08)}
.btn.grande{font-size:1.25rem;padding:1em 1.8em}
.btn.ok{background:var(--ok)} .btn.erro{background:var(--erro)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.painel{background:#fff;border-radius:var(--r-l);box-shadow:var(--sombra);padding:24px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}